import React, { useState } from 'react'
import { useTranslation } from '../i18n'

interface FavoriteButtonProps {
  active?: boolean
  onChange?: (active: boolean) => void
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

export default function FavoriteButton({ active = false, onChange, size = 'md', className = '' }: FavoriteButtonProps) {
  const { t } = useTranslation()
  const [isActive, setIsActive] = useState(active)
  const [animating, setAnimating] = useState(false)

  const sizeClasses = { sm: 'w-6 h-6', md: 'w-8 h-8', lg: 'w-10 h-10' }
  const iconSizes = { sm: 'w-3.5 h-3.5', md: 'w-4 h-4', lg: 'w-5 h-5' }

  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation()
    const newState = !isActive
    setIsActive(newState)
    if (newState) {
      setAnimating(true)
      setTimeout(() => setAnimating(false), 400)
    }
    onChange?.(newState)
  }

  return (
    <button
      onClick={handleClick}
      className={`${sizeClasses[size]} rounded-full flex items-center justify-center transition-all duration-300 
        ${isActive ? 'bg-red-50 text-red-500 scale-110' : 'bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-500'}
        ${animating ? 'animate-heart-beat' : ''}
        ${className}`}
      aria-label={isActive ? t('components.favorite.remove') : t('components.favorite.add')}
    >
      <svg className={iconSizes[size]} viewBox="0 0 24 24" fill={isActive ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth={2}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
      </svg>
    </button>
  )
}