import { memo } from 'react';

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

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

export const AlbumSearchResults = memo(
  ({
    albums,
    onAlbumSelect,
  }: {
    albums?: LookupAlbumItem[];
    onAlbumSelect: (album: LookupAlbumItem) => void;
  }) => {
    const { t } = useI18n('create');

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

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

    return (
      <>
        {albums.map((album) => (
          <AlbumListItem
            key={album.sourceUrl}
            album={album}
            onClick={() => onAlbumSelect(album)}
          />
        ))}
      </>
    );
  }
);