"use client";

import dayjs from "dayjs";
import { useQuery } from "@tanstack/react-query";
import { PostApi } from "@/entities/post";
import { ENDPOINT } from "@/shared/config";
import { PostAction } from "./post-action";

function Post({ bbsId, pstNo }: { bbsId: string; pstNo: string }) {
  const { data: postData } = useQuery({
    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
    queryFn: () => PostApi.getPostInfo(bbsId, pstNo),
  });

  return (
    <PostAction bbsId={bbsId} pstNo={pstNo}>
      <div className="card card-border !p-8">
        <h3 className="text-[2rem] font-bold">{postData?.pstTtl}</h3>
        <div className="card !m-0 !mt-8 bg-accent">
          <ul className="flex gap-8 p-4 text-xl text-label">
            <li>
              작성자: <b>{postData?.wrtrNm}</b>
            </li>
            <li>
              등록일: <b>{dayjs(postData?.regDt).format("YYYY-MM-DD")}</b>
            </li>
            <li>
              조회수: <b>{postData?.inqNocs}</b>
            </li>
          </ul>
        </div>
        <hr className="mt-8" />
        <div
          className="min-h-[40rem] p-8"
          dangerouslySetInnerHTML={{ __html: postData?.pstCn ?? "" }}
        />
        <hr className="mt-8" />
        <div className="flex items-center gap-4 p-8">
          <span>첨부파일</span>
        </div>
      </div>
    </PostAction>
  );
}

export { Post };