"use client";
import React from "react";
import { useTranslation } from "react-i18next";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import BoldIcon from "@/components/ui/BoldIcon";

interface CategoryBox {
  src: string;
  title: string;
  Classification: number;
  product: number;
  style?: string;
  ClassificationView?: boolean;
}

export default function CategoryBox(props: CategoryBox) {
  const { t } = useTranslation("common");

  return (
    <Card
      className={cn(
        "group w-[350px] max-lg:justify-center max-lg:items-center  max-lg:w-[140px] max-tablet-lg:w-[230px] max-desktop-xs:w-[300px] h-36 max-desktop-xs:h-28 flex flex-row items-center justify-start border rounded-2xl  bg-gradient-to-tr from-white/60 via-white/40 to-white/30 dark:from-neutral-800/60 dark:via-neutral-800/40 dark:to-neutral-800/30 hover:shadow-xl max-lg:flex-col max-lg:h-auto hover:scale-105 transition-all duration-300 overflow-hidden",
        props.style
      )}
    >
      {/* Image with shadow */}
      <div className="relative max-lg:justify-center max-lg:items-center max-lg:ml-0 flex-shrink-0 ml-4">
        <div className="rounded-full overflow-hidden shadow-lg">
          <img
            src={props.src}
            alt={props.title}
            className="h-28 w-28 max-desktop-xs:h-20 max-desktop-xs:w-20 object-cover transition-transform duration-300 group-hover:scale-110"
          />
        </div>
        {/* Badge with icon */}
        <Badge className="absolute -top-2 -right-2 flex items-center gap-1 px-2 py-1 dark:bg-neutral-800 bg-cyan-500 text-white shadow-md rounded-full">
          <BoldIcon name="box" size={12} tinted className="text-white w-3 h-3" />
          {props.product}
        </Badge>
      </div>

      {/* Content */}
      <CardContent className="flex flex-col justify-center pl-4 pr-4 h-full relative">
        <p className="text-xl max-lg:text-sm font-extrabold text-neutral-900 dark:text-neutral-100 line-clamp-1 max-lg:line-clamp-2 mb-2 break-words">
          {props.title}
        </p>

        <div className="flex max-lg:hidden flex-col gap-1 text-neutral-600 dark:text-neutral-300 font-semibold text-sm max-desktop-xs:text-[13px]">
          <p
            className={`${
              props.ClassificationView === true ? "" : "hidden"
            } flex items-center gap-2`}
          >
            <BoldIcon name="layer" size={16} tinted className="text-current w-4 h-4" />
            <span>{t("home.Classification")}:</span> {props.Classification}
          </p>
          <p className="flex items-center gap-2">
            <BoldIcon name="box" size={16} tinted className="text-current w-4 h-4" />
            <span>{t("home.product")}:</span> {props.product}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
