"use client"

import Image from "next/image"
import { useTranslations } from "next-intl"
import dayjs from "dayjs"
import { IMyGamePost } from "@/type/Games"
import { CommentList } from "./Comments"
import { useRef } from "react"

type IProps = {
  post: IMyGamePost
}

export default function DetailPostWGN({ post }: IProps) {
  const refModalComment = useRef<null | { showModal: () => void }>(null)
  const trans = useTranslations("wgn")

  const postedDate = dayjs.unix(Number(post?.created)).format("ddd, MMM DD, YYYY")
  const postingTime = dayjs.unix(Number(post?.created)).format("HH:mm")

  return (
    <div className="grow overflow-y-auto md:px-4 py-6">
      <div className="grid grid-cols-12 gap-6 pt-10 md:pt-6 xl:pt-0">
        <div className="flex items-center flex-col col-span-12 md:col-span-3">
          <div className="w-48 md:w-full xl:mb-8">
            <Image
              src={post?.thumbnail || "/img/not-found.png"}
              alt={post?.title ?? "not-found"}
              width={275}
              height={400}
              onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
              className="w-full h-auto object-cover"
            />
          </div>
          <div className="w-48 md:w-full">
            <div className="flex pb-4 flex-col gap-4">
              <button
                onClick={() => refModalComment?.current?.showModal()}
                type="button"
                className="group text-[var(--secondary-100)] bg-[var(--secondary-10)] border inline-flex justify-center gap-3 items-center border-[var(--secondary-20)] rounded hover:bg-[var(--primary--70)] hover:text-white group w-full py-4">
                <Image
                  src="/img/icon/chatbox.svg"
                  alt="message"
                  width={24}
                  height={24}
                  className="group-hover:hidden"
                />
                <Image
                  src="/img/icon/chatbox_white.svg"
                  alt="message"
                  width={24}
                  height={24}
                  className="hidden group-hover:block"
                />
                <span>{trans("post_comment")}</span>
              </button>
            </div>
          </div>
        </div>

        <div className="col-span-12 md:col-span-9 pt-8 md:pt-0">
          <div>
            <h2 className="text-4xl font-bold mb-2">{post?.title}</h2>
            <p className="font-normal text-lg mt-1 mb-4">
              {postedDate || ""} {postingTime && "|"} {postingTime || ""}
            </p>
            <p className="font-medium text-2xl mt-4 mb-6">{post?.title}</p>
          </div>
          <div
            className="text-xs md:text-sm lg:text-base"
            dangerouslySetInnerHTML={{ __html: post?.content }}></div>
          <hr className="my-6" />
          <CommentList ref={refModalComment} />
        </div>
      </div>
    </div>
  )
}