import { memo } from 'react';

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

import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { TrackListItem } from './TrackListItem';

export const TrackSuggestions = memo(
  ({
    tracks,
    onSelectTrack,
  }: {
    tracks?: LookupTrackItem[];
    onSelectTrack: (track: LookupTrackItem) => void;
  }) => {
    const { t } = useI18n('create');

    if (!tracks) return <></>;

    if (tracks.length === 0) {
      return (
        <Text centered isParagraph color="#ccc" size="1.5rem">
          {t('track.noSuggestions')}
        </Text>
      );
    }

    return (
      <>
        <Text tag="h4" size="1.5rem" margin="0 0 1.15rem 0" color="#999" isBold>
          {t('track.suggestionsTitle')}
        </Text>

        {tracks.map((track) => (
          <TrackListItem
            key={track.sourceUrl}
            track={track}
            onClick={() => onSelectTrack(track)}
          />
        ))}
      </>
    );
  }
);