import { type ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import type { JewelryType } from '../types';

interface CategoryCardProps {
  title: string;
  icon: ReactNode;
  type: JewelryType;
}

export default function CategoryCard({ title, icon, type }: CategoryCardProps) {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => navigate(`/editor/${type}`)}
      className="group flex flex-col items-center gap-4 rounded-2xl bg-white/10 backdrop-blur-sm
                 p-8 cursor-pointer transition-all duration-300
                 hover:bg-white/20 hover:scale-105 hover:shadow-lg hover:shadow-brand-purple-500/20
                 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-transparent"
      aria-label={`${title} tasarla`}
    >
      <span className="text-5xl transition-transform duration-300 group-hover:scale-110">
        {icon}
      </span>
      <span className="text-lg font-semibold text-white">{title}</span>
    </button>
  );
}
