import type { MouseEvent } from 'react';
import { useFavoriten } from '../lib/favoriten';
import type { FavoritArt } from '../lib/types';

export default function FavStar({ art, refId, className = '' }: { art: FavoritArt; refId: string; className?: string }) {
  const { isFav, toggle } = useFavoriten();
  const fav = isFav(art, refId);
  function onClick(e: MouseEvent) {
    e.stopPropagation();
    e.preventDefault();
    toggle(art, refId);
  }
  return (
    <button
      type="button"
      className={'fav-star' + (fav ? ' on' : '') + (className ? ' ' + className : '')}
      onClick={onClick}
      title={fav ? 'Aus Favoriten entfernen' : 'Zu meinen Favoriten'}
      aria-pressed={fav}
    >
      {fav ? '★' : '☆'}
    </button>
  );
}