"use client"

import classNames from "classnames"
import Image from "next/image"
import { Card } from "antd"
import React from "react"
import { CardItemCategoryCss } from "./style"

type IProps = {
  keyProps: string | number
  classNameBox?: string
  type: "default"
  url?: string
  url_image?: string
  alt_image?: string
  classNameContent?: string
  classNameImage?: string
  title?: string
  classNameTitle?: string
  classNameDecs?: string
  decs?: string
  buttonTopRight?: React.ReactNode
  keySelect?: any
  keyActive?: any
  onClick: (key: string | number) => void
}

export default function CardItemCategory(props: IProps) {
  const type = {
    default: "!border-[var(--secondary-20)] !bg-[var(--secondary-10)]",
  }

  return (
    <Card
      key={props.keyProps}
      className={classNames(
        `relative !p-3 border-[1px] border-solid ${
          props?.keyActive === props?.keyProps
            ? "!border-[3px] !border-[var(--primary--70)] !bg-[var(--secondary-100)]"
            : props?.keySelect === props?.keyProps
              ? "!border-[var(--primary--70)] !bg-[var(--primary--10)]"
              : type[props.type] || ""
        } ${props?.classNameBox || ""}`,
        CardItemCategoryCss,
      )}>
      {props?.buttonTopRight}
      <div className="">
        <button
          className="mb-3 w-full aspect-square"
          onClick={() => {
            props?.onClick(props?.keyProps)
          }}>
          <Image
            src={`${props?.url_image || "/img/default_image.jpg"}`}
            alt={`${props?.alt_image || "no-image"}`}
            width={300}
            height={300}
            onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
            className={`w-full h-full group-hover:scale-110 transition-transform duration-300 ease-in-out object-cover ${props?.classNameImage || ""}`}
          />
        </button>
        <div className={`${props?.classNameContent || ""}`}>
          <button
            className={`text-left mb-[2px] hover:opacity-70 text-sm h-[20px] font-semibold line-clamp-1
              ${props?.keyActive === props?.keyProps ? "text-white" : "text-[var(--secondary-100)]"}
            ${props?.classNameTitle || ""}`}
            onClick={() => {
              props?.onClick(props?.keyProps)
            }}>
            {props?.title || ""}
          </button>
          <p
            className={`text-left text-xs font-light h-[17px] line-clamp-1 ${
              props?.keyActive === props?.keyProps ? "text-white" : "text-[var(--secondary-100)]"
            } ${props?.classNameDecs || ""}`}>
            {props?.decs}
          </p>
        </div>
      </div>
    </Card>
  )
}