import type { PrereleaseLiveAlbum } from '../types';

import Box from '~/src/components/Box';
import Image from '~/src/components/Image';
import Text from '~/src/components/Text';
import formatDate from '~/src/lib/utils/formatDate';
import { concat } from '~/src/lib/utils/string';

export const AlbumPreview = ({ album }: { album: PrereleaseLiveAlbum }) => {
  let subtitle = album.artists.map((artist) => artist.name).join(', ');

  if (album.releaseDate) {
    subtitle = concat([subtitle, formatDate(album.releaseDate)]);
  }

  return (
    <Box>
      <Image
        alt=""
        src={album.image}
        maxWidth="400px"
        size={[1, 1]}
        margin="0 auto 1em"
        borderRadius="0.4em"
        style={{
          border: 'solid 1px #333',
        }}
      />
      <Box flexColumn gap="1rem">
        <Text isBold centered tag="h2" testId="albumTitle" size="3rem">
          {album.name}
        </Text>
        <Text centered tag="h3" testId="albumSubtitle">
          {subtitle}
        </Text>
      </Box>
    </Box>
  );
};