import {
  FileText,
  Search,
  Eye,
  Download,
  Package,
  Clock,
  CheckCircle,
  ShoppingBag,
} from "lucide-react";

export default function TransaksiBASTUsers() {
  const transaksi = [
    {
      no: "BAST-001",
      tanggal: "15 Mei 2026",
      barang: "Laptop ASUS ROG",
      status: "Dipinjam",
    },
    {
      no: "BAST-002",
      tanggal: "16 Mei 2026",
      barang: "Mouse Logitech",
      status: "Dibeli",
    },
    {
      no: "BAST-003",
      tanggal: "17 Mei 2026",
      barang: "Monitor Samsung",
      status: "Dipinjam",
    },
  ];

  return (
    <div className="min-h-screen bg-gray-100 p-6">

      {/* HEADER */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-4xl font-bold flex items-center gap-3">
            <FileText className="text-blue-600" size={35} />
            Transaksi BAST Users
          </h1>

          <p className="text-gray-500 mt-2">
            Riwayat transaksi barang users
          </p>
        </div>

        <button className="bg-blue-600 text-white px-5 py-3 rounded-2xl font-semibold">
          + Tambah Transaksi
        </button>
      </div>

      {/* CARD */}
      <div className="grid grid-cols-4 gap-5 mb-8">

        <div className="bg-white rounded-3xl p-5 shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-400">
                Total Transaksi
              </p>

              <h2 className="text-3xl font-bold mt-2">
                120
              </h2>
            </div>

            <Package className="text-blue-600" size={40} />
          </div>
        </div>

        <div className="bg-white rounded-3xl p-5 shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-400">
                Dipinjam
              </p>

              <h2 className="text-3xl font-bold mt-2">
                85
              </h2>
            </div>

            <Clock className="text-yellow-500" size={40} />
          </div>
        </div>

        <div className="bg-white rounded-3xl p-5 shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-400">
                Dibeli
              </p>

              <h2 className="text-3xl font-bold mt-2">
                35
              </h2>
            </div>

            <ShoppingBag className="text-green-600" size={40} />
          </div>
        </div>

        <div className="bg-white rounded-3xl p-5 shadow-sm">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-400">
                Selesai
              </p>

              <h2 className="text-3xl font-bold mt-2">
                118
              </h2>
            </div>

            <CheckCircle className="text-purple-600" size={40} />
          </div>
        </div>

      </div>

      {/* TABLE */}
      <div className="bg-white rounded-3xl p-6 shadow-sm">

        {/* TOP */}
        <div className="flex items-center justify-between mb-6">

          <h2 className="text-2xl font-bold">
            Data Transaksi
          </h2>

          <div className="relative">
            <Search
              className="absolute left-4 top-4 text-gray-400"
              size={18}
            />

            <input
              type="text"
              placeholder="Cari transaksi..."
              className="border pl-11 pr-4 py-3 rounded-2xl outline-none"
            />
          </div>
        </div>

        {/* TABLE */}
        <div className="overflow-x-auto">

          <table className="w-full">

            <thead>
              <tr className="border-b text-left text-gray-500">

                <th className="pb-4">No BAST</th>
                <th className="pb-4">Tanggal</th>
                <th className="pb-4">Barang</th>
                <th className="pb-4">Status</th>
                <th className="pb-4">Aksi</th>

              </tr>
            </thead>

            <tbody>

              {transaksi.map((item, index) => (
                <tr
                  key={index}
                  className="border-b hover:bg-gray-50"
                >

                  <td className="py-5 font-semibold">
                    {item.no}
                  </td>

                  <td>{item.tanggal}</td>

                  <td>{item.barang}</td>

                  <td>
                    <span
                      className={`px-4 py-2 rounded-xl text-sm font-semibold ${
                        item.status === "Dipinjam"
                          ? "bg-yellow-100 text-yellow-700"
                          : "bg-green-100 text-green-700"
                      }`}
                    >
                      {item.status}
                    </span>
                  </td>

                  <td>
                    <div className="flex gap-3">

                      <button className="bg-blue-100 text-blue-600 p-3 rounded-xl">
                        <Eye size={18} />
                      </button>

                      <button className="bg-green-100 text-green-600 p-3 rounded-xl">
                        <Download size={18} />
                      </button>

                    </div>
                  </td>

                </tr>
              ))}

            </tbody>

          </table>

        </div>

      </div>

    </div>
  );
}