"use client"

import classNames from "classnames"
import Image from "next/image"
import { Card } from "antd"
import { Link } from "@/i18n/routing"
import React from "react"

type IProps = {
  keyProps: string | number
  keyActive?: string | number
  className?: string
  classNameImage?: string
  classNameCover?: string
  classNameContent?: string
  title?: string
  classNameTitle?: string
  desc?: string
  classNameDesc?: string
  url_image?: string
  alt_image?: string
  url?: string
  buttonTopRight?: React.ReactNode
  buttonTopleft?: React.ReactNode
  type: "default" | "my" | "favorite"
  category: string
  classNameCategory?: string
  location: string
  classNameLocation?: string
  labelBottom?: React.ReactNode
  target?: string
  onClick?: () => void
}

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

  return (
    <Card
      key={props.keyProps}
      className={classNames(
        `relative !p-4 border-[1px] border-solid !rounded-[10px] ${
          props?.keyActive === props?.keyProps ? "!border-[var(--primary--70)] !bg-[var(--primary--10)]" : type[props.type] || ""
        } ${props?.className || ""}`,
      )}>
      <div className="flex flex-col">
        <div className={`overflow-hidden relative group !rounded-[10px] mb-3 ${props?.classNameCover || ""}`}>
          <Link
            onClick={props?.onClick && props?.onClick}
            target={props?.target}
            aria-label="Market detail"
            href={`${props?.url || "#"}`}
            className="absolute w-full h-full z-10 top-0 left-0"></Link>
            <Image
              src={`${props?.url_image || "/img/default_image.jpg"}`}
              alt={`${props?.alt_image || "no-image"}`}
              width={300}
              height={300}
              className={`w-full group-hover:scale-110 transition-transform duration-300 ease-in-out aspect-[3/2] object-cover ${props?.classNameImage || ""}`}
            />
          {props?.buttonTopleft}
          {props?.buttonTopRight}
          {props?.labelBottom}
        </div>
        <div className={`${props?.classNameContent || ""}`}>
          <p className={`text-[var(--primary--70)] text-xs font-normal h-[17px] line-clamp-1 ${props?.classNameCategory || ""}`}>{props.category}</p>
          <Link
            onClick={props?.onClick && props?.onClick}
            target={props?.target}
            aria-label="Market detail"
            href={`${props?.url || "#"}`}
            className={`mt-0 mb-1 hover:underline h-10 line-clamp-2 text-sm font-semibold ${props?.classNameTitle || ""}`}>
            {props?.title}
          </Link>
          <p
            className={`line-clamp-3 text-xs font-light h-[51px] text-[var(--book--text-color)] mb-3 opacity-80 ${props?.classNameDesc || ""}`}
            dangerouslySetInnerHTML={{ __html: props?.desc || "" }}></p>

          <div className="text-xs font-normal flex items-center h-[17px]">
            <Image
              src="/img/icon/location.svg"
              alt="location"
              width={18}
              height={18}
              className="mr-1"
            />
            <p className={`line-clamp-1 ${props?.classNameLocation || ""}`}>{props?.location}</p>
          </div>
        </div>
      </div>
    </Card>
  )
}