"use client"

import Link from "next/link"
import Rate from "../Common/Rate"
import Image from "next/image"
import { useEffect, useState } from "react"
import dayjs from "dayjs"

type IProps = {
  comment: any
  className?: string
  borderContent?: boolean
}

export default function CommentItem({ className, borderContent = false, comment }: IProps) {
  const [startSize, setStartSize] = useState(24)
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 992) {
        setStartSize(32)
      } else {
        setStartSize(24)
      }
    }
    handleResize()
    window.addEventListener("resize", handleResize)

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  return (
    <div className={`flex items-start gap-4 lg:gap-7 text-[var(--secondary-80)] ${className}`}>
      <div className="pt-6 pb-4 shrink-0 basis-1/3 w-1/3 md:basis-1/4 md:w-1/4 lg:basis-0 lg:w-w-36 md:max-w-[50%]">
        <div className="w-[52px] h-[52px] lg:w-[72px] lg:h-[72px] rounded-full lg:rounded-lg bg-[var(--secondary-20)] overflow-hidden mb-2">
          <Image
            src={comment?.user && comment?.user?.photo ? comment?.user?.photo : "/img/account/avatar.svg"}
            alt="name"
            width={72}
            height={72}
            className="w-full h-full object-cover rounded-lg"
            onError={(e) => (e.currentTarget.src = "/img/account/avatar.svg")}
          />
        </div>
        <p className="text-xs lg:text-sm font-semibold">{comment?.user ? `${comment?.user?.firstname} ${comment?.user?.lastname}` : "--"}</p>
        <Link
          href="mailto:someone@example.com"
          className="text-[0.625rem] lg:text-xs line-clamp-1"
          scroll={false}>
          {comment?.user?.email || "--"}
        </Link>
      </div>
      <div className={`py-6 grow ${borderContent ? "border-b border-b-[var(--secondary-30)]" : ""}`}>
        <div className="flex items-center justify-between">
          <Rate
            value={comment?.ratings ? Number(comment.ratings) : 1}
            color="#db9a1d"
            size={startSize}
            className="flex items-center justity-start"
          />
          <span className="text-[0.625rem] leading-4 md:text-xs lg:text-sm">{dayjs.unix(comment.created).format("MMM DD, YYYY")}</span>
        </div>
        <p className="pt-2 text-[0.625rem] leading-4 md:text-xs lg:text-sm">{comment.comments}</p>
      </div>
    </div>
  )
}