"use client";
import { Textarea } from "@/components/ui/textarea";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import NewContent from "@/components/landing-page/new-content";
import { Link } from "@/i18n/routing";
import { getDetailIndeks } from "@/service/landing/landing";
import { formatDateToIndonesian } from "@/utils/globals";

const IndeksDetail = () => {
  const [indeksData, setIndeksData] = useState<any>();
  const params = useParams();
  const slug = params?.slug;

  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    const response = await getDetailIndeks();
    console.log(response);
    setIndeksData(response?.data?.data?.content);
  };

  return (
    <>
      <div className="p-4 lg:px-60 lg:p-12">
        {/* Judul */}
        <div className="flex justify-center mb-5">
          <h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1>
        </div>
        {/* Gambar Utama */}
        <div className="flex items-center justify-center">
          <img src={indeksData?.thumbnailLink} alt="Main" className="h-[500px] w-full rounded-lg" />
        </div>
        {/* Footer Informasi */}
        <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
          <p className="items-end">
            {formatDateToIndonesian(new Date(indeksData?.createdAt))} {indeksData?.timezone ? indeksData?.timezone : "WIB"}|{" "}
            <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
              <path
                fill="currentColor"
                d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
              />
            </svg>{" "}
            {indeksData?.clickCount}
          </p>
        </div>

        {/* Keterangan */}
        <div className="w-auto">
          <p dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
        </div>
      </div>

      <div className="w-full">
        {/* Comment */}
        <div className="flex flex-col my-16 p-10 bg-[#f7f7f7]">
          <div className="gap-5 flex flex-col px-4 lg:px-16">
            <p className="flex items-start text-lg">Berikan Komentar</p>
            <Textarea placeholder="Type your comments here." className="flex w-full" />
            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
          </div>
        </div>

        {/* Konten Serupa */}
        <div className="space-x-5 flex flex-col p-4">
          <NewContent type={"similar"} />
        </div>
      </div>
    </>
  );
};

export default IndeksDetail;