import { IconInfo } from '../icons';
import styles from './AlertBar.module.scss';

export type AlertBarVariant = 'info' | 'warning' | 'danger';

export interface AlertBarProps {
  /** Alert message */
  message: string;
  /** Visual variant */
  variant?: AlertBarVariant;
  /** Custom icon (defaults to IconInfo) */
  icon?: React.ReactNode;
  /** Additional CSS classes */
  className?: string;
}

const variantClassMap: Record<AlertBarVariant, string> = {
  info: styles.info,
  warning: styles.warning,
  danger: styles.danger,
};

export const AlertBar = ({
  message,
  variant = 'info',
  icon = <IconInfo size={16} />,
  className = '',
}: AlertBarProps) => {
  const containerClassName = [styles.container, variantClassMap[variant], className]
    .filter(Boolean)
    .join(' ');

  return (
    <div className={containerClassName}>
      {icon}
      <span>{message}</span>
    </div>
  );
};