web-kebaikan-indonesia/components/landing-page/lifestyle.tsx

"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { CommentIcon } from "../icons/sidebar-icon";
import { Button } from "../ui/button";
import { MessageCircle } from "lucide-react";

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

export default function Lifestyle() {
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [articles, setArticles] = useState<Article[]>([]);
  const [showData, setShowData] = useState("5");
  const [visibleCount, setVisibleCount] = useState(4);
  const [search, setSearch] = useState("");
  const [selectedCategories, setSelectedCategories] = useState<any>("");
  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  useEffect(() => {
    fetchArticles();
  }, [page, showData, startDateValue, selectedCategories]);

  async function fetchArticles() {
    const req = {
      limit: showData,
      page,
      search,
      categorySlug: Array.from(selectedCategories).join(","),
      sort: "desc",
      isPublish: true,
      sortBy: "created_at",
    };
    try {
      const res = await getListArticle(req);
      setArticles(res?.data?.data || []);
    } catch (err) {
      console.error(err);
    }
  }

  return (
    <section className=" py-10 ">
      <div className="w-full py-8 bg-white shadow border">
        <div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8 ">
          <div className="lg:col-span-2">
            <div className="flex flex-col items-start gap-3 mb-6">
              <h2 className="text-xl font-bold text-gray-900 uppercase">
                LIFESTYLE
              </h2>
              <span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {articles.slice(0, visibleCount).map((item) => (
                <Link
                  key={item.id}
                  href={`/detail/${item.id}`}
                  className="group block rounded-lg overflow-hidden"
                >
                  <Image
                    src={item.thumbnailUrl || "/placeholder.png"}
                    alt={item.title}
                    width={500}
                    height={300}
                    className="w-full h-[280px] object-cover rounded-lg"
                  />
                  <h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
                    {item.title}
                  </h3>
                  <div className="flex items-center gap-2 mt-2 text-sm text-gray-600">
                    <span className="font-semibold">{item.createdByName}</span>
                    <span>•</span>
                    <span>
                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </span>
                    <span className="flex items-center gap-1 text-yellow-600">
                      <MessageCircle size={16} /> 0 comments
                    </span>
                  </div>
                </Link>
              ))}
            </div>

            {visibleCount < articles.length && (
              <div className="flex justify-center mt-8">
                <Button
                  onClick={() => setVisibleCount((prev) => prev + 4)}
                  variant="ghost"
                  className="text-xs font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
                >
                  LOAD MORE
                  <span className="text-yellow-500">↓</span>
                </Button>
              </div>
            )}
          </div>

          <div className="space-y-6 mt-16">
            <div className="border rounded-lg p-5 bg-white shadow-sm">
              <h4 className="font-bold text-gray-900 mb-3">
                Subscribe us to get the latest news!
              </h4>
              <form className="space-y-3">
                <label className="block text-sm font-medium text-gray-700">
                  Email address:
                </label>
                <input
                  type="email"
                  placeholder="Your email address"
                  className="w-full border border-gray-300 rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
                />
                <button
                  type="submit"
                  className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 rounded-md transition"
                >
                  SIGN UP
                </button>
              </form>
            </div>

            <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
              <Image
                src="/kolom.png"
                alt="Berita Utama"
                fill
                className="object-contain rounded"
              />
            </div>
          </div>
        </div>
      </div>
      <div className="w-full py-8 bg-[#F1F3F8] shadow border">
        <div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8 ">
          <div className="lg:col-span-2">
            <div className="flex flex-col items-start gap-3 mb-6">
              <h2 className="text-xl font-bold text-gray-900 uppercase">
                BUSINESS
              </h2>
              <span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
            </div>

            {/* Grid artikel */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* {articles.slice(0, visibleCount).map((item) => (
                <Link
                  key={item.id}
                  href={`/detail/${item.id}`}
                  className="group block rounded-lg overflow-hidden"
                >
                  <Image
                    src={item.thumbnailUrl || "/placeholder.png"}
                    alt={item.title}
                    width={500}
                    height={300}
                    className="w-full h-[280px] object-cover rounded-lg"
                  />
                  <h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
                    {item.title}
                  </h3>
                  <div className="flex items-center gap-2 mt-2 text-sm text-gray-600">
                    <span className="font-semibold">{item.createdByName}</span>
                    <span>•</span>
                    <span>
                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </span>
                    <span className="flex items-center gap-1 text-yellow-600">
                      <MessageCircle size={16} /> 0 comments
                    </span>
                  </div>
                </Link>
              ))} */}
            </div>

            {/* Load More button */}
            {/* {visibleCount < articles.length && (
              <div className="flex justify-center mt-8">
                <Button
                  onClick={() => setVisibleCount((prev) => prev + 4)}
                  className="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-6 py-2 rounded-md"
                >
                  Load More
                </Button>
              </div>
            )} */}
          </div>

          {/* Sidebar */}
          {/* <div className="space-y-6 mt-16">
         
            <div className="border rounded-lg p-5 bg-white shadow-sm">
              <h4 className="font-bold text-gray-900 mb-3">
                Subscribe us to get the latest news!
              </h4>
              <form className="space-y-3">
                <label className="block text-sm font-medium text-gray-700">
                  Email address:
                </label>
                <input
                  type="email"
                  placeholder="Your email address"
                  className="w-full border border-gray-300 rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
                />
                <button
                  type="submit"
                  className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 rounded-md transition"
                >
                  SIGN UP
                </button>
              </form>
            </div>

           
            <div className="relative w-[1111px] max-w-full h-[300px] overflow-hidden flex items-center mx-auto border my-6 rounded">
              <Image
                src="/kolom.png"
                alt="Berita Utama"
                fill
                className="object-contain rounded"
              />
            </div>
          </div> */}
        </div>
      </div>
      <div className="w-full py-10 bg-white">
        <div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <div className="flex flex-col items-start gap-2 mb-6">
              <h2 className="text-2xl font-bold text-gray-900 uppercase">
                SPORTS
              </h2>
              <span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {articles.slice(0, visibleCount).map((item) => (
                <Link
                  key={item.id}
                  href={`/detail/${item.id}`}
                  className="group block rounded-lg overflow-hidden"
                >
                  <Image
                    src={item.thumbnailUrl || "/placeholder.png"}
                    alt={item.title}
                    width={500}
                    height={300}
                    className="w-full h-[200px] object-cover rounded-lg"
                  />
                  <h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
                    {item.title}
                  </h3>
                  <div className="flex items-center gap-2 mt-2 text-xs text-gray-600 flex-wrap">
                    <span className="font-semibold">{item.createdByName}</span>
                    <span>-</span>
                    <span>
                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </span>
                  </div>
                </Link>
              ))}
            </div>

            {visibleCount < articles.length && (
              <div className="flex justify-center mt-10">
                <Button
                  onClick={() => setVisibleCount((prev) => prev + 4)}
                  variant="ghost"
                  className="text-xs font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
                >
                  LOAD MORE
                  <span className="text-yellow-500">↓</span>
                </Button>
              </div>
            )}
          </div>

          <div className="space-y-8">
            <div className="relative w-full h-[200px] overflow-hidden flex items-center justify-center border rounded-lg">
              <Image
                src="/kolom.png"
                alt="Kolom Iklan"
                fill
                className="object-contain rounded"
              />
            </div>

            <div>
              <h4 className="font-bold text-gray-900 mb-4">Join Us!</h4>
              <ul className="space-y-3 text-sm">
                <li className="flex items-center gap-2">
                  <span className="w-7 h-7 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs">
                    F
                  </span>
                  Facebook
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-7 h-7 flex items-center justify-center bg-black text-white rounded-full text-xs">
                    X
                  </span>
                  Twitter
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-7 h-7 flex items-center justify-center bg-pink-500 text-white rounded-full text-xs">
                    IG
                  </span>
                  Instagram
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-7 h-7 flex items-center justify-center bg-red-600 text-white rounded-full text-xs">
                    ▶
                  </span>
                  Youtube
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-7 h-7 flex items-center justify-center bg-red-400 text-white rounded-full text-xs">
                    P
                  </span>
                  Pinterest
                </li>
                <li className="flex items-center gap-2">
                  <span className="w-7 h-7 flex items-center justify-center bg-pink-400 text-white rounded-full text-xs">
                    D
                  </span>
                  Dribbble
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div className="w-full py-10 bg-[#F1F3F8] border-t">
        <div className="mx-auto max-w-7xl">
          <div className="flex flex-col items-start gap-2 mb-6">
            <h2 className="text-2xl font-bold text-gray-900 uppercase">
              TECHNOLOGY
            </h2>
            <span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {articles.slice(0, visibleCount).map((item) => (
              <Link
                key={item.id}
                href={`/detail/${item.id}`}
                className="group block rounded-lg overflow-hidden"
              >
                <Image
                  src={item.thumbnailUrl || "/placeholder.png"}
                  alt={item.title}
                  width={500}
                  height={300}
                  className="w-full h-[280px] object-cover rounded-lg"
                />
                <h3 className="mt-3 font-bold text-lg group-hover:text-yellow-600 transition">
                  {item.title}
                </h3>
                <div className="flex items-center gap-2 mt-2 text-xs text-gray-600 flex-wrap">
                  <span className="font-semibold">{item.createdByName}</span>
                  <span>-</span>
                  <span>
                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
                      day: "numeric",
                      month: "long",
                      year: "numeric",
                    })}
                  </span>
                  <span className="flex items-center gap-1 text-gray-500">
                    <MessageCircle size={14} className="text-yellow-500" /> 0
                    comments
                  </span>
                </div>
              </Link>
            ))}
          </div>

          <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
            <Image
              src="/image-kolom.png"
              alt="Berita Utama"
              fill
              className="object-cover"
            />
          </div>

          {visibleCount < articles.length && (
            <div className="flex justify-center mt-10">
              <button
                onClick={() => setVisibleCount((prev) => prev + 3)}
                className="text-xs font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
              >
                LOAD MORE <span className="text-yellow-500">↓</span>
              </button>
            </div>
          )}
        </div>
      </div>
      <div className="w-full py-10 bg-white border-t">
        <div className="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-10">
          <div className="lg:col-span-2">
            <div className="flex flex-col items-start gap-2 mb-6">
              <h2 className="text-2xl font-bold text-gray-900 uppercase">
                FASHION
              </h2>
              <span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
            </div>

            <div className="space-y-8">
              {articles.slice(0, visibleCount).map((item) => (
                <Link
                  key={item.id}
                  href={`/detail/${item.id}`}
                  className="flex flex-col md:flex-row gap-5 group"
                >
                  <Image
                    src={item.thumbnailUrl || "/placeholder.png"}
                    alt={item.title}
                    width={300}
                    height={200}
                    className="w-full md:w-[250px] h-[180px] object-cover rounded-lg"
                  />
                  <div className="flex-1">
                    <h3 className="font-bold text-xl text-gray-900 group-hover:text-yellow-600 transition">
                      {item.title}
                    </h3>
                    <p className="text-gray-600 text-sm mt-2 line-clamp-2">
                      {item.description}
                    </p>
                    <div className="flex items-center gap-2 mt-3 text-sm text-gray-600">
                      <span className="font-semibold">
                        {item.createdByName}
                      </span>
                      <span>-</span>
                      <span>
                        {new Date(item.createdAt).toLocaleDateString("id-ID", {
                          day: "numeric",
                          month: "long",
                          year: "numeric",
                        })}
                      </span>
                      <span className="flex items-center gap-1 text-yellow-600">
                        <MessageCircle size={16} /> 0 comments
                      </span>
                    </div>
                  </div>
                </Link>
              ))}
            </div>

            <div className="relative my-5 max-w-full h-[125px] overflow-hidden flex items-center mx-auto border">
              <Image
                src="/image-kolom.png"
                alt="Berita Utama"
                fill
                className="object-cover"
              />
            </div>

            {visibleCount < articles.length && (
              <div className="flex justify-center mt-6">
                <button
                  onClick={() => setVisibleCount((prev) => prev + 3)}
                  className="text-sm font-semibold text-gray-700 hover:text-yellow-600 flex items-center gap-1"
                >
                  LOAD MORE <span className="text-yellow-500">↓</span>
                </button>
              </div>
            )}
          </div>

          <div>
            <div className="flex flex-col items-start gap-2 mb-6">
              <h2 className="text-lg font-bold text-gray-900 ">Recent Post</h2>
              <span className="w-10 h-[3px] bg-yellow-500 inline-block"></span>
            </div>
            <div className="space-y-5">
              {articles.map((post, idx) => (
                <Link
                  key={post.id}
                  href={`/detail/${post.id}`}
                  className="flex items-start gap-3 group"
                >
                  {/* Thumbnail */}
                  <Image
                    src={post.thumbnailUrl || "/placeholder.png"}
                    alt={post.title}
                    width={80}
                    height={80}
                    className="w-[70px] h-[70px] object-cover rounded"
                  />

                  {/* Konten */}
                  <div className="flex-1">
                    <p className="text-[10px] uppercase text-yellow-600 font-bold">
                      {post.categoryName}
                    </p>
                    <h4 className="font-semibold text-sm text-gray-900 group-hover:text-yellow-600">
                      {post.title}
                    </h4>
                    <span className="text-xs text-gray-500">
                      {new Date(post.createdAt).toLocaleDateString("id-ID", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </span>
                  </div>

                  {/* Nomor urut */}
                  <span className="text-2xl font-bold text-yellow-500 w-8 flex-shrink-0">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}