"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 { CardItemWGNCss } from "./style"
import { useTranslations } from "next-intl"

type IProps = {
  keyProps: string | number
  className?: string
  type: "me"
  url?: string
  url_image?: string
  alt_image?: string
  classNameImage?: string
  paymentElement?: React.ReactNode
  date?: string
  time?: string
  classNameDate?: string
  title?: string
  classNameTitle?: string
  classNameDecs?: string
  decs?: string
  buttonTopRight?: React.ReactNode
  keyActive?: any
  numberView?: string
  numberReplied?: string
}

export default function CardItemAllForumsWGN(props: IProps) {
  const trans = useTranslations("wgn")
  const type = {
    me: "!border-[var(--blue-20)] !bg-[var(--secondary-10)]",
  }

  const renderIconContent = (title: string, quantity: number | string, src_icon: string, alt_icon: string, className?: string) => {
    return (
      <div className={`text-sm flex flex-col items-center font-normal text-[var(--secondary-60)] ${className || ""}`}>
        <div className="flex mb-1">
          <Image
            src={src_icon}
            alt={alt_icon}
            width={24}
            height={24}
          />
          <div className="text-base leading-[22px] font-bold text-[var(--secondary-100)] ml-2">{title}</div>
        </div>
        <div className="font-medium text-[2rem] leading-[2.5rem] text-[var(--primary--70)] line-clamp-1 flex-1">{quantity}</div>
      </div>
    )
  }

  return (
    <Card
      key={props.keyProps}
      className={classNames(
        `relative !p-2 border-[1px] border-solid ${
          props?.keyActive === props?.keyProps ? "!border-[var(--primary--70)] !bg-[var(--primary--10)]" : type[props.type] || ""
        } ${props?.className || ""}`,
        CardItemWGNCss,
      )}>
      <div className="flex flex-col md:flex-row gap-2 justify-between">
        <div className="flex basis-[65%] gap-2 mb-3 md:mb-0">
          <Link
            className="w-[7.125rem]"
            aria-label="post WGN 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-square ${props?.classNameImage || ""}`}
            />
          </Link>
          <div className="flex-1">
            <Link
              aria-label="post WGN detail"
              href={`${props?.url || "#"}`}
              className={`mb-2.5 hover:underline hover:text-[var(--blue-80)] hover:opacity-80 text-base text-[var(--blue-80)] h-[22px] text-base font-bold line-clamp-1 ${props?.classNameTitle}`}>
              {props?.title || ""}
            </Link>
            <p
              className={`text-sm font-light text-[var(--secondary-70)] h-[20px] line-clamp-1 mb-10 ${props?.classNameDecs || ""}`}
              dangerouslySetInnerHTML={{ __html: props?.decs || "" }}></p>
            <p className={`text-sm font-light text-[var(--secondary-70)] line-clamp-1 mb-0 ${props?.classNameDate}`}>
              {props?.date || ""} {props?.time && "|"} {props?.time || ""}
            </p>
          </div>
        </div>

        <div className="flex flex-1 justify-end items-center">
          {renderIconContent(
            trans("viewed"),
            `${props?.numberView || 0}`,
            `/img/icon/db_eye.svg`,
            "db_eye",
            "basis-1/2 border-r-[1px] border-solid border-[var(--secondary-20)]",
          )}
          {renderIconContent(trans("replied"), `${props?.numberReplied || 0}`, `/img/icon/db_message.svg`, "db_message", "basis-1/2")}
        </div>
      </div>
    </Card>
  )
}