"use client";

import Link from "next/link";
import { NewsDetails } from "@/services/NewsDetails";
import { useNewsFilter } from "@/hooks/useNewsFilter";

export default function NewsPage() {
  const { selectedCategory, setSelectedCategory } = useNewsFilter();

  // Filter news items based on the selected category
  const filteredNews =
    selectedCategory === null
      ? NewsDetails
      : NewsDetails.filter((news) => news.category === selectedCategory);

  return (
    <section className="bg-gray-50 py-16">
      <div className="container mx-auto px-6 lg:px-12">
        {/* Section Title */}
        <div className="mb-12">
          <h2 className="text-4xl font-bold text-blue-600">NEWS</h2>
          <p className="text-black font-semibold mt-2">
            {selectedCategory || "お知らせ"}
          </p>
        </div>

        {/* News Filters */}
        <div className="flex items-center space-x-8 mb-8">
          <button
            className={`text-sm font-bold ${
              selectedCategory === null ? "text-black" : "text-gray-400"
            } cursor-pointer hover:underline`}
            onClick={() => setSelectedCategory(null)}
          >
            すべての記事
          </button>
          <button
            className={`text-sm font-bold ${
              selectedCategory === "イベント" ? "text-black" : "text-gray-400"
            } cursor-pointer hover:underline`}
            onClick={() => setSelectedCategory("イベント")}
          >
            イベント
          </button>
          <button
            className={`text-sm font-bold ${
              selectedCategory === "メディア" ? "text-black" : "text-gray-400"
            } cursor-pointer hover:underline`}
            onClick={() => setSelectedCategory("メディア")}
          >
            メディア
          </button>
          <button
            className={`text-sm font-bold ${
              selectedCategory === "お知らせ" ? "text-black" : "text-gray-400"
            } cursor-pointer hover:underline`}
            onClick={() => setSelectedCategory("お知らせ")}
          >
            お知らせ
          </button>
        </div>

        {/* News List or Empty State */}
        {filteredNews.length > 0 ? (
          <div className="bg-white rounded-lg shadow">
            {filteredNews.map((news) => (
              <div
                key={news.id}
                className="flex justify-between items-center px-6 py-4 border-b last:border-none hover:bg-gray-100 transition"
              >
                {/* Left Section */}
                <div className="flex items-center space-x-3">
                  <span className="bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
                    {news.category}
                  </span>
                  <span className="text-gray-400 text-sm">{news.date}</span>
                </div>

                {/* Right Section */}
                <Link
                  href={`/NewsDetails/${news.id}`}
                  className="text-black font-semibold hover:underline text-sm md:text-base"
                >
                  {news.title}
                </Link>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-16">
            <p className="text-gray-500 text-lg font-semibold">
              の実績記事はありません
            </p>
          </div>
        )}

        {/* Breadcrumbs */}
        <div className="flex justify-end items-center mt-6 space-x-2 text-sm text-gray-400">
          <Link href="/" className="hover:underline">
            ホーム
          </Link>
          <span>・</span>
          <span className="text-black font-bold">お知らせ</span>
        </div>
      </div>
    </section>
  );
}