"use client";
import { Alert, CloseButton, Spinner } from "@heroui/react";
import type { ReactNode } from "react";
export type AlertStatus = "default" | "accent" | "danger" | "success" | "warning";
export type SystemAlertProps = {
  title: string;
  children?: ReactNode;
  status?: AlertStatus;
  variant?: "primary" | "secondary";
  action?: ReactNode;
  onClose?: () => void;
  loading?: boolean;
  className?: string;
};
export default function SystemAlert({
  title,
  children,
  status = "default",
  variant = "secondary",
  action,
  onClose,
  loading,
  className = "",
}: SystemAlertProps) {
  return (
    <Alert
      status={status}
      data-notice-status={status}
      role={status === "danger" || status === "warning" ? "alert" : "status"}
      className={`system-alert ${variant === "secondary" ? "system-alert--secondary" : ""} min-w-0 ${className}`}
    >
      <Alert.Indicator>
        {loading ? <Spinner size="sm" aria-label={title} /> : undefined}
      </Alert.Indicator>
      <Alert.Content className="min-w-0">
        <Alert.Title>{title}</Alert.Title>
        {children && <Alert.Description className="break-words">{children}</Alert.Description>}
        {action && <div className="mt-3 flex flex-wrap gap-2">{action}</div>}
      </Alert.Content>
      {onClose && <CloseButton aria-label="Cerrar aviso" onPress={onClose} className="shrink-0" />}
    </Alert>
  );
}