// components/TambahIklanModal.tsx
"use client";

import * as React from "react";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Plus } from "lucide-react";

export function TambahIklanModalUpdate() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button onClick={() => setOpen(true)} color="primary" size="md">
          <Plus className="mr-2 h-4 w-4" />
          Tambah Iklan
        </Button>
      </DialogTrigger>
      <DialogContent size="md">
        <DialogHeader>
          <DialogTitle>Tambah Iklan</DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          <div>
            <p className="font-medium">Target Area</p>
            <div className="flex flex-wrap gap-4 mt-2">
              {["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
                (label) => (
                  <label key={label} className="flex items-center gap-2">
                    <Checkbox id={label} />
                    <span>{label}</span>
                  </label>
                )
              )}
            </div>
          </div>

          <div>
            <p className="font-medium">Publish Area</p>
            <div className="flex flex-wrap gap-4 mt-2">
              {["Semua", "Nasional", "Polda", "Satker", "International"].map(
                (label) => (
                  <label key={label} className="flex items-center gap-2">
                    <Checkbox id={label} />
                    <span>{label}</span>
                  </label>
                )
              )}
            </div>
          </div>

          <div>
            <p className="font-medium">Nama Iklan</p>
            <Input placeholder="Masukkan nama iklan" />
          </div>

          <div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
            <svg
              className="w-6 h-6 mb-2 text-blue-500"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
              />
            </svg>
            <div>
              Drag your file(s) or{" "}
              <span className="text-blue-500 underline cursor-pointer">
                browse
              </span>
            </div>
            <div className="text-xs mt-1">Max 10 MB files are allowed</div>
          </div>

          <div>
            <p className="font-medium">Deskripsi</p>
            <Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
          </div>

          <div className="text-right">
            <Button
              type="submit"
              className="bg-blue-600 text-white hover:bg-blue-700"
            >
              Tambah Iklan
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}