"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { getListArticle } from "@/service/article";

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    file_url: string;
    file_alt: string;
  }[];
};

export default function Header() {
  const [article, setArticle] = useState<Article | null>(null);
  const [showData, setShowData] = useState("5");

  useEffect(() => {
    initState();
  }, []);

  async function initState() {
    const req = {
      limit: showData,
      page: 1,
      search: "",
      categorySlug: "",
      sort: "desc",
      isPublish: true,
      sortBy: "created_at",
    };

    try {
      const res = await getListArticle(req);
      setArticle(res?.data?.data?.[0] || null);
    } catch (error) {
      console.error("Gagal memuat artikel:", error);
    }
  }

  return (
    <header className="bg-white w-full pt-3 flex justify-center">
      <div className="relative max-w-screen-xl h-auto md:h-[483px] flex flex-col md:flex-row overflow-hidden shadow-md mx-3 md:mx-3 lg:mx-5">
        <div className="w-full md:w-1/2 h-[250px] md:h-full">
          <Image
            src={article?.thumbnailUrl || "/dummy.jpg"}
            alt={article?.title || "No Title"}
            width={730}
            height={483}
            className="object-cover w-full h-full"
          />
        </div>

        <div className="w-full md:w-1/2 bg-[#714C3D] text-white p-6 md:p-10 flex flex-col justify-center">
          <span className="bg-black text-white text-xs px-2 py-1 mb-4 inline-block w-fit">
            {article?.categoryName || "Berita Terkini"}
          </span>
          <h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
            {article?.title || "Memuat..."}
          </h1>
          <div className="flex flex-wrap gap-4 text-sm opacity-90">
            <div className="flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
              >
                <g fill="none">
                  <path d="M0 0h24v24H0z" />
                  <path
                    fill="currentColor"
                    d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
                  />
                </g>
              </svg>
              <span>
                {article
                  ? new Date(article.createdAt).toLocaleDateString("id-ID", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })
                  : ""}
              </span>
            </div>
            <div className="flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 32 32"
              >
                <path
                  fill="currentColor"
                  d="M28 4h-2V2h-2v2H8V2H6v2H4a2.006 2.006 0 0 0-2 2v22a2.006 2.006 0 0 0 2 2h24a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 24H4V10h24Z"
                />
              </svg>
              <span>{article?.createdByName || ""}</span>
            </div>
            <div className="flex items-center gap-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-4 w-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                />
              </svg>
              <span>0</span>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}
