import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
import { classNames } from '@/lib/components/classNames';
import type { ReactNode } from 'react';
import styles from './Alert.module.css';

export type AlertTone = 'info' | 'success' | 'warning' | 'error';

const toneIcon: Record<AlertTone, ApprovedIconName> = {
  info: 'info',
  success: 'check',
  warning: 'warning',
  error: 'error',
};

interface AlertProps {
  tone?: AlertTone;
  title?: string;
  children: ReactNode;
  live?: 'off' | 'polite' | 'assertive';
  inline?: boolean;
  className?: string;
}

export function Alert({
  tone = 'info',
  title,
  children,
  live = 'off',
  inline = false,
  className,
}: AlertProps) {
  return (
    <div
      className={classNames(styles.alert, styles[tone], inline && styles.inline, className)}
      role={live === 'assertive' ? 'alert' : live === 'polite' ? 'status' : undefined}
      aria-live={live === 'off' ? undefined : live}
    >
      <Icon name={toneIcon[tone]} />
      <div>
        {title ? <strong className={styles.title}>{title}</strong> : null}
        <div className={styles.content}>{children}</div>
      </div>
    </div>
  );
}
