import { Card } from "@/components/ui/card";
import { CategoryIcon } from "@/components/shared/category-icon";
import type { Category } from "@/types/domain";

export function CategoryCard({ category }: { category: Category }) {
  return (
    <Card className="rounded-2xl border border-[#dfe6f6] bg-white p-4 transition hover:shadow-md">
      <div className="flex items-center gap-3">
        <CategoryIcon
          image={category.image || category.icon}
          nameAr={category.name_ar}
          nameEn={category.name_en}
          iconSize={96}
          containerClassName="h-28 w-28 rounded-3xl"
          imageClassName="h-24 w-24"
          iconClassName="h-24 w-24"
        />
        <div>
          <p className="text-sm font-bold text-slate-900">{category.name_ar}</p>
          <p className="text-[11px] text-slate-500">{category.name_en}</p>
        </div>
      </div>
    </Card>
  );
}