"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"

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
  numberComment?: string
}

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

  const renderIconContent = (title: string, src_icon: string, alt_icon: string, className?: string) => {
    return (
      <div className={`text-sm flex items-center font-normal text-[var(--secondary-60)] ${className || ""}`}>
        <Image
          src={src_icon}
          alt={alt_icon}
          width={24}
          height={24}
        />
        <div className="pl-1 line-clamp-1 flex-1">{title}</div>
      </div>
    )
  }

  return (
    <div key={props.keyProps}>
      <Card
        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,
        )}>
        {props?.buttonTopRight}
        <div className="flex gap-2 w-full">
          <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] 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-4 xs:mb-9 lg:mb-4 xl:mb-9 ${props?.classNameDecs || ""}`}
              dangerouslySetInnerHTML={{ __html: props?.decs || "" }}></p>
            <div className="block xs:flex lg:block xl:flex justify-between">
              <div className={`text-sm font-light text-[var(--secondary-70)] line-clamp-1 mb-1 xs:mb-0 lg:mb-1 xl:mb-0 ${props?.classNameDate}`}>
                {props?.date || ""} {props?.time && "|"} {props?.time || ""}
              </div>
              <div className="flex">
                {renderIconContent(`${props?.numberView || 0}`, `/img/icon/db_eye.svg`, "db_eye", "mr-4")}
                {renderIconContent(`${props?.numberComment || 0}`, `/img/icon/db_message.svg`, "db_message")}
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  )
}