'use client';

import { useMemo, useRef } from 'react';

import { useTranslations } from 'next-intl';

import { Heart } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { useFavorites } from '@/hooks/useFavorites';
import { cn } from '@/lib/utils';
import { animateFavoriteToHeader, createFavoriteCreatorItem } from '@/utils/favorites';

import type { CreatorData } from '@/types/Creator';

type FavoriteCreatorButtonProps = {
  creator: CreatorData;
};

const FavoriteCreatorButton: React.FC<FavoriteCreatorButtonProps> = ({ creator }) => {
  const t = useTranslations('favorites.actions');
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const favorite = useMemo(() => createFavoriteCreatorItem(creator), [creator]);
  const { isFavorite, toggleFavorite } = useFavorites();
  const active = isFavorite('creator', creator.alkotoAzonosito);
  const label = active ? t('removeCreator') : t('addCreator');

  const handleClick = () => {
    const wasAdded = toggleFavorite(favorite);
    if (wasAdded) animateFavoriteToHeader(buttonRef.current);
  };

  return (
    <Button
      ref={buttonRef}
      type="button"
      variant="ghost"
      size="icon"
      aria-pressed={active}
      aria-label={label}
      title={label}
      onClick={handleClick}
      className={cn(
        'h-8 w-8 text-[#151720]/70 transition-colors hover:bg-transparent hover:text-red-600 focus-visible:ring-red-500/30',
        active ? 'text-red-600 hover:text-red-700 focus-visible:ring-red-500' : 'hover:text-red-600'
      )}
    >
      <Heart className={cn(active && 'fill-current')} />
    </Button>
  );
};

export default FavoriteCreatorButton;