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 TrackSearchResults = memo(
  ({
    tracks,
    onTrackSelect,
  }: {
    tracks?: LookupTrackItem[];
    onTrackSelect: (track: LookupTrackItem) => void;
  }) => {
    const { t } = useI18n('create');

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

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

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