import React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { X } from "lucide-react";

interface Props {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  formData: any;
  setFormData: React.Dispatch<React.SetStateAction<any>>;
  checkValidation: (key: string, value:string) => void;
  validationError: { phone_number: string | null };
  handleSubmit: (e: React.FormEvent) => void;
  loading: boolean;
}

const LeadFormDialog = ({
  open,
  onOpenChange,
  formData,
  setFormData,
  checkValidation,
  validationError,
  handleSubmit,
  loading,
}: Props) => {
  const set = (field: string, value: any) => {
    setFormData((prev: any) => ({ ...prev, [field]: value }));
    checkValidation(field, value)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="max-w-md p-0 overflow-hidden">
            <div className="flex items-center justify-center min-h-[100vh]">          
                <div className="w-full max-w-md bg-white dark:bg-[#1f2a37] rounded-lg shadow-lg">
                    {/* HEADER */}
                    <DialogHeader className="px-4 pt-4 pb-2">
                    <DialogTitle>Welcome</DialogTitle>
                    </DialogHeader>

                    {/* FORM */}
                    <form onSubmit={handleSubmit} className="p-4 pb-4 space-y-4">
                        <div>
                            <Label>Name *</Label>
                            <Input
                            value={formData.name}
                            onChange={(e) => set("name", e.target.value)}
                            required
                            />
                        </div>

                        <div>
                            <Label>Phone Number *</Label>
                            <Input
                                value={formData.phone_number}
                                onChange={(e) => set("phone_number", e.target.value)}
                                maxLength={10}
                                required
                            />
                            {validationError?.phone_number && <span className="text-sm text-red-500">{validationError.phone_number}</span>}
                        </div>

                        <div className="flex justify-end pt-2 border-t">
                            <Button type="submit" disabled={loading}>
                            {loading ? "Saving..." : "Continue"}
                            </Button>
                        </div>
                    </form>
                </div>
            </div>
        </DialogContent>
    </Dialog>
  );
};

export default React.memo(LeadFormDialog);