'use client';

import { useTranslations } from 'next-intl';

import { Heart } from 'lucide-react';

import { useFavorites } from '@/hooks/useFavorites';
import { cn } from '@/lib/utils';

import { Link, usePathname } from '@/i18n/navigation';

type FavoritesNavLinkProps = {
  className?: string;
  onClick?: () => void;
};

const FavoritesNavLink: React.FC<FavoritesNavLinkProps> = ({ className, onClick }) => {
  const t = useTranslations('favorites');
  const pathname = usePathname();
  const { count } = useFavorites();
  const isActive = pathname === '/kedvencek';
  const countLabel = count > 99 ? '99+' : String(count);

  return (
    <Link
      href="/kedvencek"
      data-favorites-target
      aria-label={t('navLabel', { count })}
      title={t('title')}
      onClick={onClick}
      className={cn(
        'group relative inline-flex h-[42px] w-[42px] shrink-0 items-center justify-center border border-[#151720]/20 bg-[#f4f3ef] text-[#151720]/75 shadow-sm transition-colors duration-200 hover:border-red-500/35 hover:bg-red-50 hover:text-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500/25 lg:max-xl:h-9 lg:max-xl:w-9',
        isActive && 'border-red-500/40 bg-red-50 text-red-600',
        className
      )}
    >
      <Heart
        className={cn(
          'h-5 w-5 transition-all duration-200 group-hover:fill-red-500/10 lg:max-xl:h-[18px] lg:max-xl:w-[18px]',
          count > 0 && 'fill-red-500/10 text-red-600'
        )}
      />
      <span className="sr-only">{t('title')}</span>
      {count > 0 && (
        <span className="absolute -right-1.5 -top-1.5 flex min-h-5 min-w-5 items-center justify-center rounded-full bg-[#151720] px-1 text-[10px] font-bold leading-none text-white shadow-sm transition-colors group-hover:bg-red-600 lg:max-xl:-right-1 lg:max-xl:-top-1 lg:max-xl:min-h-4 lg:max-xl:min-w-4 lg:max-xl:text-[9px]">
          {countLabel}
        </span>
      )}
    </Link>
  );
};

export default FavoritesNavLink;