"use client";

import type { ChangeEvent } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

type CloseComplaintDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  closeComment: string;
  onCloseCommentChange: (v: string) => void;
  onConfirm: () => void | Promise<void>;
};

export function CloseComplaintDialog({
  open,
  onOpenChange,
  closeComment,
  onCloseCommentChange,
  onConfirm,
}: CloseComplaintDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="rounded-xl sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Cerrar reclamo</DialogTitle>
        </DialogHeader>
        <div className="space-y-2 py-2">
          <Label htmlFor="close-comment">Comentario de cierre</Label>
          <Textarea
            id="close-comment"
            className="rounded-xl"
            placeholder="Motivo o resolución..."
            value={closeComment}
            onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
              onCloseCommentChange(e.target.value)
            }
          />
        </div>
        <DialogFooter className="gap-2 sm:gap-0">
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
            Cancelar
          </Button>
          <Button
            className="bg-blue-600 hover:bg-blue-700"
            type="button"
            onClick={() => void onConfirm()}
          >
            Confirmar cierre
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}