export default function Settings() {
  const settingsMenu = [
    "Profil Toko",
    "Manajemen User",
    "Ganti Password",
    "Printer Struk",
    "Pengaturan Pajak",
    "Kategori Barang",
    "Backup Data",
    "Tentang Aplikasi",
  ];

  return (
    <div className="p-8 bg-[#f4f7fe] min-h-screen">
      
      <div className="mb-8">
        <h1 className="text-5xl font-bold text-gray-800">
          Settings
        </h1>

        <p className="text-gray-500 mt-2">
          Pengaturan aplikasi kasir
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">

        {settingsMenu.map((item, index) => (

          <div
            key={index}
            className="
              bg-white
              rounded-3xl
              p-6
              shadow-md
              hover:shadow-xl
              transition
              duration-300
              cursor-pointer
              border
            "
          >

            <div className="flex items-center justify-between">

              <div>
                <h2 className="text-xl font-semibold text-gray-800">
                  {item}
                </h2>

                <p className="text-gray-500 text-sm mt-2">
                  Klik untuk membuka pengaturan
                </p>
              </div>

              <div className="
                w-12
                h-12
                rounded-2xl
                bg-blue-100
                flex
                items-center
                justify-center
                text-2xl
                x           
              ">
                ⚙️
              </div>

            </div>

          </div>

        ))}

      </div>

    </div>
  );
}