"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
  className?: string
  type: "default" | "me" | "favourites" | "bookings" | "special"
  url?: string
  url_image?: string
  alt_image?: string
  classNameImage?: string
  paymentElement?: React.ReactNode
  nation?: string
  foodType?: string
  classNameNation?: string
  title?: string
  classNameTitle?: string
  classNameDecs?: string
  decs?: string
  rate?: string | number
  buttonTopRight?: React.ReactNode
  footerContent?: React.ReactNode
  priceElement?: React.ReactNode
  footer?: React.ReactNode
  keyActive?: any
  onClick?: () => void
}

export default function CardItemKuisine(props: IProps) {
  const type = {
    default: "!border-[var(--secondary-20)] !bg-[var(--secondary-10)]",
    me: "!border-[var(--blue-20)] !bg-[var(--secondary-10)]",
    favourites: "!border-[var(--kuisine--favorite-border-color)] !bg-[var(--book--favorite-color)]",
    bookings: "!border-[var(--secondary-20)] !bg-[var(--secondary-10)]",
    special: "!border-[var(--blue-20)] !bg-[var(--secondary-100)]",
  }

  return (
    <div key={props.keyProps}>
      <Card
        className={classNames(
          `relative !p-3 border-[1px] border-solid ${
            props?.keyActive === props?.keyProps && props.type !== "special"
              ? "!border-[var(--primary--70)] !bg-[var(--primary--10)]"
              : type[props.type] || type["default"]
          } ${props?.className || ""}`,
        )}>
        {props?.buttonTopRight}
        <div className="flex gap-2 md:gap-3 mb-4">
          <Link
            onClick={props?.onClick && props?.onClick}
            className="w-[8.125rem]"
            aria-label="Kuisine detail"
            href={`${props?.url || "#"}`}>
            <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 group-hover:scale-110 transition-transform duration-300 ease-in-out aspect-[65/71] ${props?.classNameImage || ""}`}
            />
          </Link>
          <div className="flex-1">
            {props?.priceElement}
            {props?.paymentElement}
            <p className={`font-normal text-sm text-[var(--secondary-60)] h-5 line-clamp-1 ${props?.classNameNation}`}>
              {props?.nation || ""} {props?.foodType && "|"} {props?.foodType || ""}
            </p>
            <Link
              onClick={props?.onClick && props?.onClick}
              aria-label="Kuisine detail"
              href={`${props?.url || "#"}`}
              className={`my-0 hover:underline hover:text-[var(--secondary-60)] hover:opacity-80 text-[var(--secondary-60)] h-[66px] text-base font-semibold line-clamp-3 ${props?.classNameTitle}`}>
              {props?.title || ""}
            </Link>
          </div>
        </div>
        <p
          className={`text-sm font-light h-[60px] line-clamp-3 mb-3.5 ${props?.classNameDecs || ""}`}
          dangerouslySetInnerHTML={{ __html: props?.decs || "" }}></p>
        {props?.footerContent}
      </Card>
      {props?.footer}
    </div>
  )
}