"use client"

import { Link } from "@/i18n/routing"
import React from "react"
import Image from "next/image"

type IProps = {
  keyProps: string | number
  className?: string
  url?: string
  classNameBoxImg?: string
  aria_label?: string
  url_image?: string
  alt_image?: string
  classNameImage?: string
  classNameBoxContent?: string
  title?: string
  classNameTitle?: string
  subTitle?: string
  classNameSubTitle?: string
  buttonTopRight?: React.ReactNode
  keyActive?: any
  onClick?: () => void
}

export default function CardItemDocument(props: IProps) {
  return (
    <div
      key={props.keyProps}
      className={`relative border-[1px] border-solid border-[var(--secondary-20)] rounded-[10px] flex flex-col items-center ${
        props?.keyActive === props?.keyProps ? "!border-[var(--primary--70)] !bg-[var(--primary--10)]" : ""
      } ${props?.className || ""}`}>
      {props?.buttonTopRight}
      <Link
        className={`rounded-[10px] ${props?.classNameBoxImg || ""}`}
        aria-label={`${props?.aria_label || ""}`}
        href={props?.url || "#"}
        scroll={props?.url === "#" ? true : false}
        onClick={() => props?.onClick && props?.onClick()}>
        <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-[4/5] ${props?.classNameImage || ""}`}
        />
      </Link>
      <div className={`text-center w-full ${props?.classNameBoxContent || ""}`}>
        <p className={`text-sm font-semibold text-[var(--secondary-100)] mb-[0.5] line-clamp-1 ${props?.classNameTitle || ""}`}>{props?.title}</p>
        <p className={`text-xs font-light text-[var(--secondary-100)] ${props?.classNameSubTitle || ""}`}>{props?.subTitle}</p>
      </div>
    </div>
  )
}