import { Flex, Text } from '@chakra-ui/react';
import { LuMusic2 } from 'react-icons/lu';

import { Track } from '@/back-api';
import { Covers } from '@/components/Cover';

export type DisplayTrackProps = {
  track: Track;
};
export const DisplayTrack = ({ track }: DisplayTrackProps) => {
  return (
    <Flex direction="row" width="full" height="full">
      <Covers
        data={track?.covers}
        size="50"
        height="full"
        iconEmpty={<LuMusic2 size="50" height="full" />}
      />
      <Flex
        direction="column"
        width="full"
        height="full"
        paddingLeft="5px"
        overflowX="hidden"
      >
        <Text
          as="span"
          align="left"
          fontSize="20px"
          fontWeight="bold"
          userSelect="none"
          marginRight="auto"
          overflow="hidden"
          noOfLines={[1, 2]}
          marginY="auto"
        >
          [{track.track}] {track.name}
        </Text>
      </Flex>
    </Flex>
  );
};
