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 AlbumSuggestions = memo(
  ({
    albums,
    onSelectAlbum,
  }: {
    albums?: LookupAlbumItem[];
    onSelectAlbum: (album: LookupAlbumItem) => void;
  }) => {
    const { t } = useI18n('create');

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

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

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

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