"use client"

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

type IProps = {
  keyProps: string | number
  className?: string
  type: "default" | "me" | "favourites" | "bookings"
  url?: string
  url_image?: string
  alt_image?: string
  classNameImage?: string
  title?: string
  classNameTitle?: string
  classNameDecs?: string
  decs?: string
  rate?: number
  buttonTopRight?: React.ReactNode
  date?: string
  author?: string
  keyActive?: any
}

export default function CardItemExperience(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)]",
  }

  return (
    <div key={props.keyProps}>
      <Card
        className={classNames(
          `relative !p-3 border-[1px] border-solid ${
            props?.keyActive === props?.keyProps ? "!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
            className="w-[8.125rem]"
            aria-label="Book detail"
            href={`${props?.url || "#"}`}>
            <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-[65/71] ${props?.classNameImage || ""}`}
            />
          </Link>
          <div className="flex-1">
            <p className="text-sm font-normal text-[var(--secondary-60)] mb-4">{dayjs(props?.date).format("MMM DD, YYYY") || ""}</p>
            <div className="text-sm flex items-center font-normal	text-[var(--primary--70)] mb-1">
              <Image
                src={"/img/icon/user_octagon.svg"}
                alt={"user_octagon"}
                width={24}
                height={24}
              />
              <div className="pl-1.5 flex-1 h-5 line-clamp-1">{props?.author || ""}</div>
            </div>
            <Link
              aria-label="Book detail"
              href={`${props?.url || "#"}`}
              className={`my-0 hover:underline hover:text-[var(--secondary-60)] hover:opacity-80 text-[var(--secondary-60)] h-[44px] text-base font-semibold line-clamp-2 ${props?.classNameTitle}`}>
              {props?.title || ""}
            </Link>

            <div className={`flex items-center gap-1`}>
              <span className="text-base font-semibold leading-[22px] text-[var(--primary--70)] ">{Number(props?.rate)}</span>
              <Rate
                value={Number(props?.rate)}
                color="#DB9A1D"
              />
            </div>
          </div>
        </div>
        <p
          className={`text-sm font-light h-[20px] line-clamp-1 mb-3.5 ${props?.classNameDecs || ""}`}
          dangerouslySetInnerHTML={{ __html: props?.decs || "" }}></p>
      </Card>
    </div>
  )
}