'use client';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';

interface AlertViewModalProps {
  open: boolean;
  setOpen: (open: boolean) => void;
  alert: {
    id: number;
    title: string;
    description: string;
    status: 'ativo' | 'pendente' | 'resolvido';
  } | null;
}

export function AlertViewModal({ open, setOpen, alert }: AlertViewModalProps) {
  if (!alert) return null;

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Detalhes do Alerta</DialogTitle>
          <DialogDescription>Visualize as informações do alerta selecionado.</DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div>
            <strong>ID:</strong> {alert.id}
          </div>
          <div>
            <strong>Título:</strong> {alert.title}
          </div>
          <div>
            <strong>Descrição:</strong> {alert.description}
          </div>
          <div>
            <strong>Status:</strong> <Badge>{alert.status}</Badge>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
