"use client";

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

// Definisi type
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 Footer() {
  const [articles, setArticles] = useState<Article[]>([]);
  const [loading, setLoading] = useState(true);

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

  async function fetchArticles() {
    try {
      const req = {
        limit: "2", // ambil 2 berita untuk recent news
        page: 1,
        search: "",
        categorySlug: "",
        sort: "desc",
        isPublish: true,
        sortBy: "created_at",
      };

      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
    } catch (error) {
      console.error("Gagal memuat artikel:", error);
    } finally {
      setLoading(false);
    }
  }

  return (
    <footer className="bg-[#002b5c] text-white py-12">
      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-10">
        {/* Recent News */}
        <div>
          <h3 className="font-bold text-lg mb-4 text-yellow-400">
            Recent News
          </h3>
          {loading && <p className="text-sm">Memuat...</p>}
          {!loading &&
            articles.map((article) => (
              <div key={article.id} className="flex mb-4">
                <div className="w-20 h-16 relative flex-shrink-0">
                  <Image
                    src={
                      article.thumbnailUrl ||
                      article.files?.[0]?.file_url ||
                      "/placeholder.jpg"
                    }
                    alt={article.files?.[0]?.file_alt || article.title}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="ml-3">
                  <Link
                    href={`/article/${article.id}`}
                    className="text-sm font-medium hover:underline"
                  >
                    {article.title}
                  </Link>
                  <p className="text-xs text-gray-300 mt-1 flex items-center gap-1">
                    <Calendar className="w-3 h-3" />
                    {new Date(article.createdAt).toLocaleDateString("id-ID", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                  </p>
                </div>
              </div>
            ))}
        </div>

        {/* Kategori */}
        <div>
          <h3 className="font-bold text-lg mb-4 text-yellow-400">Kategori</h3>
          <ul className="space-y-2 text-sm">
            <li>
              <Link href="#" className="hover:underline">
                Business
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Cryptocurrency
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Economy
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Gadget
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Markets
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Opinion
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Politics
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Real Estate
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                Startup
              </Link>
            </li>
            <li>
              <Link href="#" className="hover:underline">
                World
              </Link>
            </li>
          </ul>
        </div>

        {/* Site Navigation */}
        <div>
          <h3 className="font-bold text-lg mb-4 text-yellow-400">
            Site Navigation
          </h3>
          <ul className="space-y-2 text-sm">
            <li>
              <Link href="/" className="hover:underline">
                Home
              </Link>
            </li>
            <li>
              <Link href="/ads" className="hover:underline">
                Advertisement
              </Link>
            </li>
            <li>
              <Link href="/contact" className="hover:underline">
                Contact Us
              </Link>
            </li>
            <li>
              <Link href="/privacy" className="hover:underline">
                Privacy & Policy
              </Link>
            </li>
            <li>
              <Link href="/links" className="hover:underline">
                Other Links
              </Link>
            </li>
          </ul>
        </div>

        {/* Brand Info */}
        <div>
          <h2 className="text-2xl font-bold">
            business<span className="text-yellow-400">today</span>
          </h2>
          <p className="text-sm mt-3 text-gray-300">
            We bring you the best Premium WordPress Themes that perfect for
            news, magazine, personal blog, etc. Check our landing page for
            details.
          </p>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-gray-600 mt-10 pt-6 text-center text-sm text-gray-400">
        © 2025 JNew.
      </div>
    </footer>
  );
}