"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 { formatCurrency } from "@/util/Common"

type IProps = {
  className?: string
  classNameImage?: string
  classNameCover?: string
  classNameContent?: string
  classNameTitle?: string
  classNameAuthor?: string
  classNamePrice?: string
  classNameDecs?: string
  url_image?: string
  alt_image?: string
  url?: string
  title?: string
  decs?: string
  createdAt?: string
  author?: string
  keyProps: string | number
  buttonTopRight?: React.ReactNode
  buttonTopleft?: React.ReactNode
  buttonTopRightHozizontal?: React.ReactNode
  type: "common" | "my" | "favorite"
  rate?: number
  price?: number
  onClick?: () => void
}

export default function CardItemBook(props: IProps) {
  const type = {
    common: "!bg-[var(--secondary-10)]",
    my: "!border-[var(--blue-20)] !bg-[var(--blue-20))]",
    favorite: "!border-[var(--primary--30)] !bg-[var(--book--favorite-color))]",
  }

  return (
    <Card
      key={props.keyProps}
      cover={
        <div className={`overflow-hidden relative group rounded-[10px] ${props?.classNameCover || ""}`}>
          <Link
            onClick={props?.onClick && props?.onClick}
            aria-label="Book 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}
            onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
            className={`w-full group-hover:scale-110 transition-transform duration-300 ease-in-out aspect-[3/2] h-[200px] object-cover ${props?.classNameImage || ""}`}
          />
          <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white py-1 px-2 text-sm text-center">
            <Rate value={props.rate ?? 0} />
          </div>
          {props?.buttonTopleft}
          {props?.buttonTopRight}
        </div>
      }
      className={classNames(`relative !p-3 border-[1px] border-solid ${type[props.type] || ""} ${props?.className || ""}`)}>
      {props?.buttonTopRightHozizontal}
      <div className={`${props?.classNameContent || ""}`}>
        <Link
          onClick={props?.onClick && props?.onClick}
          aria-label="Book detail"
          href={`${props?.url || "#"}`}
          className={`my-0 hover:underline ${props?.classNameTitle}`}>
          {props?.title}
        </Link>
        <p className={`mt-[2px] line-clamp-1 font-normal h-[18px] text-[var(--secondary-70)] ${props?.classNameAuthor || ""}`}>{props?.author}</p>
        <p className={`text-[var(--primary--70)] ${props?.classNamePrice || ""}`}>${formatCurrency(props.price || 0)}</p>
        <p className={`text-[10px] leading-[14px] font-light line-clamp-1 ${props?.classNameDecs || ""}`}>{props?.decs || ""}</p>
      </div>
    </Card>
  )
}