'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, createFavoriteCreationItem } from '@/utils/favorites';

import type { CreationPageItem } from '@/types/Creation';

type FavoriteCreationButtonProps = {
  creation: CreationPageItem;
  className?: string;
};

const FavoriteCreationButton: React.FC<FavoriteCreationButtonProps> = ({ creation, className }) => {
  const t = useTranslations('favorites.actions');
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const favorite = useMemo(() => createFavoriteCreationItem(creation), [creation]);
  const { isFavorite, toggleFavorite } = useFavorites();
  const active = isFavorite('creation', creation.alkotasAzonosito);
  const label = active ? t('removeCreation') : t('addCreation');

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

  return (
    <Button
      ref={buttonRef}
      type="button"
      variant="outline"
      size="icon"
      aria-pressed={active}
      aria-label={label}
      title={label}
      onClick={handleClick}
      className={cn(
        // round (not square) + red framing sets the favourite apart from the
        // neutral, square-ish share buttons — it reads as a distinct site action
        'transition-colors hover:bg-transparent focus-visible:ring-red-500/30',
        active
          ? 'border-red-600 text-red-600 hover:text-red-700 focus-visible:ring-red-500'
          : 'border-red-500/50 text-red-500/80 hover:border-red-600 hover:text-red-600',
        className
      )}
    >
      <Heart className={cn(active && 'fill-current')} />
    </Button>
  );
};

export default FavoriteCreationButton;