import { AlertCircle, AlertTriangle, CheckCircle2, Info, StickyNote } from 'lucide-react';
import styles from './Notification.module.css';

export type NotificationVariant = 'info' | 'success' | 'error' | 'warning' | 'note';

export interface NotificationProps {
  variant?: NotificationVariant;
  title?: string;
  children: React.ReactNode;
  className?: string;
}

const ICONS: Record<NotificationVariant, React.ReactNode> = {
  info: <Info size={16} />,
  success: <CheckCircle2 size={16} />,
  error: <AlertCircle size={16} />,
  warning: <AlertTriangle size={16} />,
  note: <StickyNote size={16} />,
};

export function Notification({ variant = 'info', title, children, className }: NotificationProps) {
  return (
    <div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
      <span className={styles.icon}>{ICONS[variant]}</span>
      <div className={styles.body}>
        {title && <p className={styles.title}>{title}</p>}
        <p className={styles.message}>{children}</p>
      </div>
    </div>
  );
}