import { motion } from "framer-motion";
import type { Category } from "./types";
import { FaCogs } from "react-icons/fa";
import { useTranslation } from "react-i18next";

interface Props {
  category: Category;
}

export default function CategoryCard({ category }: Props) {
  const { t } = useTranslation();
  const { title, description, icon: IconFromData } = category;
  const Icon = IconFromData ?? FaCogs;
  return (
    <motion.article
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.4 }}
      className="group relative overflow-hidden rounded-xl bg-zinc-900/80 ring-1 ring-zinc-800 hover:ring-red-600/60 p-5 sm:p-6"
    >
      <div className="absolute -right-8 -top-8 h-24 w-24 rounded-full bg-red-600/10 blur-xl transition-opacity group-hover:opacity-70" />
      <div className="relative z-10 flex items-start gap-4">
        <div className="grid h-12 w-12 place-items-center rounded-lg bg-red-600/20 text-2xl text-white">
          <Icon aria-hidden className="h-6 w-6" />
        </div>
        <div>
          <h3 className="text-white text-lg font-semibold leading-tight">
            {t(title)}
          </h3>
          {description && (
            <p className="mt-1 text-sm text-white/70">{t(description)}</p>
          )}
        </div>
      </div>
    </motion.article>
  );
}
