"use client";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Eye, Pencil, Trash2, Filter } from "lucide-react";

export default function ApproverContentWebsite() {
  const tabs = [
    "Hero Section",
    "About Us",
    "Our Products",
    "Our Services",
    "Technology Partners",
    "Pop Up",
  ];

  const data = [
    {
      title: "Beyond Expectations to Build Reputation.",
      subtitle: "-",
      author: "John Kontributor",
      status: "Published",
      date: "2024-01-15",
    },
    {
      title: "Manajemen Reputasi untuk Institusi",
      subtitle: "-",
      author: "Sarah Kontributor",
      status: "Pending",
      date: "2024-01-14",
    },
  ];

  return (
    <div className="space-y-6">
      {/* HEADER */}
      <div>
        <h1 className="text-2xl font-bold text-slate-800">Content Website</h1>
        <p className="text-slate-500">
          Update homepage content, products, services, and partners
        </p>
      </div>

      {/* TABS */}
      <div className="bg-white rounded-2xl shadow border p-2 flex flex-wrap gap-2">
        {tabs.map((tab, i) => (
          <button
            key={i}
            className={`px-4 py-2 rounded-xl text-sm font-medium transition ${
              i === 0
                ? "bg-blue-600 text-white"
                : "hover:bg-slate-100 text-slate-600"
            }`}
          >
            {tab}
          </button>
        ))}
      </div>

      {/* SEARCH & FILTER */}
      <div className="flex gap-4">
        <Input placeholder="Search Hero Section by title, author, or content..." />
        <Button variant="outline" className="flex items-center gap-2">
          <Filter size={16} /> Filters
        </Button>
      </div>

      {/* TABLE */}
      <div className="bg-white rounded-2xl shadow border overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 text-slate-600">
            <tr>
              <th className="text-left px-6 py-4">Main Title</th>
              <th className="text-left px-6 py-4">Subtitle</th>
              <th className="text-left px-6 py-4">Author</th>
              <th className="text-left px-6 py-4">Status</th>
              <th className="text-left px-6 py-4">Date</th>
              <th className="text-left px-6 py-4">Actions</th>
            </tr>
          </thead>

          <tbody>
            {data.map((item, i) => (
              <tr key={i} className="border-t hover:bg-slate-50 transition">
                <td className="px-6 py-4 font-medium text-slate-800">
                  {item.title}
                </td>

                <td className="px-6 py-4">{item.subtitle}</td>

                <td className="px-6 py-4 text-slate-600">{item.author}</td>

                <td className="px-6 py-4">
                  <span
                    className={`text-xs font-medium px-3 py-1 rounded-full ${
                      item.status === "Published"
                        ? "bg-green-100 text-green-600"
                        : "bg-yellow-100 text-yellow-600"
                    }`}
                  >
                    {item.status}
                  </span>
                </td>

                <td className="px-6 py-4 text-slate-600">{item.date}</td>

                <td className="px-6 py-4">
                  <div className="flex gap-3 text-slate-500">
                    <Eye
                      size={18}
                      className="cursor-pointer hover:text-blue-600"
                    />
                    <Pencil
                      size={18}
                      className="cursor-pointer hover:text-green-600"
                    />
                    <Trash2
                      size={18}
                      className="cursor-pointer hover:text-red-600"
                    />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        {/* FOOTER */}
        <div className="flex justify-between items-center px-6 py-4 border-t bg-slate-50">
          <p className="text-sm text-slate-500">Showing 1 to 2 of 2 items</p>

          <div className="flex gap-2">
            <button className="px-4 py-2 border rounded-lg text-sm">
              Previous
            </button>
            <button className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">
              1
            </button>
            <button className="px-4 py-2 border rounded-lg text-sm">2</button>
            <button className="px-4 py-2 border rounded-lg text-sm">3</button>
            <button className="px-4 py-2 border rounded-lg text-sm">
              Next
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}