import { useTranslation } from 'next-i18next';
import { Link } from 'types';
import FavoriteItem from './FavoriteItem';
import styles from './favorites.module.scss';
import clsx from 'clsx';

export default function Favorites({ favorites }: { favorites: Link[] }) {
  const { t } = useTranslation();

  return (
    favorites.length !== 0 && (
      <div className={styles['favorites']}>
        <h4>{t('common:favorite')}</h4>
        <ul className={clsx(styles['items'], 'reset')}>
          {favorites.map((link) => (
            <FavoriteItem
              link={link}
              key={link.id}
            />
          ))}
        </ul>
      </div>
    )
  );
}
