"use client";

import { ChangeEvent } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";


import { ShippingData } from "@/lib/types";

interface ShippingModalProps {
  open: boolean;
  onClose: () => void;
  onSave: (shippingData: ShippingData) => void; // ✅ Allow passing shippingData
  shippingData: ShippingData;
  setShippingData: React.Dispatch<React.SetStateAction<ShippingData>>;
  editing: boolean;
  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
}

export const ShippingModal = ({
  open,
  onClose,
  onSave,
  shippingData,
  editing,
  handleChange,
  setShippingData,
}: ShippingModalProps) => {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="text-lg">
            {editing ? "Edit Shipping Method" : "Add Shipping Method"}
          </DialogTitle>
        </DialogHeader>

        <div className="grid gap-4 py-4">
          <div className="space-y-2">
            <label className="text-sm font-medium">Method Name</label>
            <Input
              name="name"
              placeholder="Shipping Method Name"
              value={shippingData.name}
              onChange={handleChange}
            />
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Price</label>
            <Input
              name="price"
              type="number"
              step="0.01"
              placeholder="Price (£)"
              value={shippingData.price}
              onChange={handleChange}
            />
          </div>
        </div>

        <DialogFooter className="flex justify-end gap-2">
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={() => onSave(shippingData)}>
            {editing ? "Update Shipping Method" : "Create Shipping Method"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};