"use client";

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

type Article = {
  id: number;
  title: string;
  description: string;
  categoryName: string;
  createdAt: string;
  slug: string;
  createdByName: string;
  thumbnailUrl: string;
  categories: {
    title: string;
  }[];
  files: {
    fileUrl: 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">
        <Link className="flex" href={`/details/${article?.slug}`}>
          <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>
        </Link>
      </div>
    </header>
  );
}