'use client';

import { Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';

interface ChatDeleteMessageDialogProps {
  open: boolean;
  count: number;
  loading?: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void | Promise<void>;
}

export function ChatDeleteMessageDialog({ open, count, loading, onOpenChange, onConfirm }: ChatDeleteMessageDialogProps) {
  const plural =
    count === 1 ? 'это сообщение' : count < 5 ? `${count} сообщения` : `${count} сообщений`;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="rounded-[24px] sm:max-w-[420px]">
        <DialogHeader>
          <DialogTitle>Удалить сообщение?</DialogTitle>
        </DialogHeader>
        <p className="text-sm text-[#667085]">
          {count === 1
            ? 'Сообщение будет удалено для всех участников чата. Это действие нельзя отменить.'
            : `Будут удалены ${plural}. Это действие нельзя отменить.`}
        </p>
        <div className="mt-6 flex justify-end gap-2">
          <Button type="button" variant="secondary" className="rounded-xl" disabled={loading} onClick={() => onOpenChange(false)}>
            Отмена
          </Button>
          <Button
            type="button"
            className="rounded-xl bg-red-600 text-white hover:bg-red-700"
            disabled={loading}
            onClick={() => void onConfirm()}
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Удалить'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}