"use client";

import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Plus } from "lucide-react";
import Galery from "@/components/table/galery";
import { GaleriDialog } from "@/components/dialog/galery-dialog";

export default function GaleryPage() {
  const [openDialog, setOpenDialog] = useState(false);

  const handleSubmitGaleri = () => {
    console.log("Submit galeri...");
    setOpenDialog(false);
  };

  return (
    <div>
      <div className="overflow-x-hidden overflow-y-scroll w-full">
        <div className="px-2 md:px-4 md:py-4 w-full">
          <div className="pl-3">
            <h1 className="text-[#1F6779] text-2xl font-semibold">Galeri</h1>
            <p>Kelola Galeri JAECOO</p>
          </div>

          <div className="dark:bg-[#18181b] rounded-xl p-3">
            <Button
              className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2"
              onClick={() => setOpenDialog(true)}
            >
              <Plus className="h-4 w-4" />
              Tambah Galeri Baru
            </Button>

            <Galery />
          </div>
        </div>
      </div>

      <GaleriDialog
        open={openDialog}
        onClose={() => setOpenDialog(false)}
        onSubmit={handleSubmitGaleri}
      />
    </div>
  );
}