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

import React from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  PlusCircle,
  Loader2,
} from "lucide-react";

interface AddCardModalProps {
  isModalOpen: boolean;
  setIsModalOpen: (open: boolean) => void;
  newCardName: string;
  setNewCardName: (name: string) => void;
  newCardOrgName: string;
  setNewCardOrgName: (org: string) => void;
  addCard: () => void;
  adding: boolean;
}

export function AddCardModal({
  isModalOpen,
  setIsModalOpen,
  newCardName,
  setNewCardName,
  newCardOrgName,
  setNewCardOrgName,
  addCard,
  adding,
}: AddCardModalProps) {
  return (
    <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
      <DialogTrigger asChild>
        <Button className="p-4 rounded-md border transition cursor-pointer">
          Add Data Source
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold">
            Create a Data Source
          </DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <label className="text-right text-sm font-medium">Name</label>
            <Input
              placeholder="Enter data name"
              value={newCardName}
              onChange={(e) => setNewCardName(e.target.value)}
              className="col-span-3 text-sm"
            />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <label className="text-right text-sm font-medium">Organization</label>
            <Input
              placeholder="Enter organization name"
              value={newCardOrgName}
              onChange={(e) => setNewCardOrgName(e.target.value)}
              className="col-span-3 text-sm"
            />
          </div>
        </div>
        <DialogFooter>
          <Button
            onClick={addCard}
            disabled={adding}
            className="w-full flex items-center justify-center"
          >
            {adding && <Loader2 className="mr-2 animate-spin" />} Add Data Source
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}