import type { ReactNode } from 'react';

import { cn, type Accent } from '@/lib/cn';

interface AlertProps {
  accent: Accent;
  children: ReactNode;
  className?: string;
  /** Optional ARIA role override; defaults to "alert" for errors. */
  role?: string;
}

const ACCENT_FILL: Record<Accent, string> = {
  red: 'accent-fill-red',
  orange: 'accent-fill-orange',
  yellow: 'accent-fill-yellow',
  green: 'accent-fill-green',
  cyan: 'accent-fill-cyan',
  blue: 'accent-fill-blue',
  purple: 'accent-fill-purple',
  pink: 'accent-fill-pink',
  rose: 'accent-fill-rose',
  teal: 'accent-fill-teal',
};

export function Alert({ accent, children, className, role }: AlertProps) {
  return (
    <div
      role={role ?? (accent === 'red' || accent === 'rose' ? 'alert' : 'status')}
      className={cn(
        'rounded-md border border-current/30 px-3 py-2 font-mono text-xs',
        ACCENT_FILL[accent],
        className,
      )}
    >
      {children}
    </div>
  );
}