import type { LookupAlbumItem } from '@theorchard/songwhip-api';

import ListItem from '~/src/components/ListItem';
import formatDate from '~/src/lib/utils/formatDate';
import { concat } from '~/src/lib/utils/string';

export const AlbumListItem = ({
  album: { artists, upc, sourceUrl, releaseDate, name, image },
  onClick,
}: {
  album: LookupAlbumItem;
  onClick(): void;
}) => {
  let subtitle = artists.map((artist) => artist.name).join(', ');

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

  if (upc) {
    subtitle = concat([subtitle, upc]);
  }

  return (
    <ListItem
      testId="albumListItem"
      key={sourceUrl ?? upc}
      title={name}
      subtitle={subtitle}
      image={image ?? undefined}
      imageSize="4rem"
      height="6rem"
      onClick={() => onClick()}
    />
  );
};