import type { LookupTrackItem } 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 TrackListItem = ({
  track,
  onClick,
}: {
  track: LookupTrackItem;
  onClick: () => void;
}) => {
  let subtitle = track.artists.map((artist) => artist.name).join(', ');

  const { isrc, sourceUrl } = track;

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

  if (track.isrc) {
    subtitle = concat([subtitle, track.isrc]);
  }

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