"use client";

import { AlertDialog, Button, Spinner } from "@heroui/react";

interface Props {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isRequesting: boolean;
  orderNumber: string;
}

export function RequestReturnDialog({
  isOpen,
  onClose,
  onConfirm,
  isRequesting,
  orderNumber,
}: Props) {
  return (
    <AlertDialog>
      <AlertDialog.Backdrop isOpen={isOpen} onOpenChange={(open) => { if (!open) onClose(); }}>
        <AlertDialog.Container>
          <AlertDialog.Dialog>
            <AlertDialog.Header>
              <AlertDialog.Icon status="warning" />
              <AlertDialog.Heading>Request a Return?</AlertDialog.Heading>
            </AlertDialog.Header>
            <AlertDialog.Body>
              <p className="text-sm text-gray-600">
                You are requesting a return for order{" "}
                <span className="font-medium text-[#1a2e2d]">{orderNumber}</span>.
                Our team will review your request and contact you with next steps.
              </p>
            </AlertDialog.Body>
            <AlertDialog.Footer>
              <Button variant="outline" slot="close" isDisabled={isRequesting}>
                Cancel
              </Button>
              <Button
                variant="primary"
                onPress={onConfirm}
                isDisabled={isRequesting}
              >
                {isRequesting ? (
                  <>
                    <Spinner size="sm" />
                    Submitting…
                  </>
                ) : (
                  "Yes, Request Return"
                )}
              </Button>
            </AlertDialog.Footer>
          </AlertDialog.Dialog>
        </AlertDialog.Container>
      </AlertDialog.Backdrop>
    </AlertDialog>
  );
}
