import React, { useState } from 'react'
import styles from '@/app/styles/components/Alert.module.css'

type AlertVariant = 'info' | 'success' | 'warning' | 'error'

interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: AlertVariant
  title?: string
  description?: string
  onClose?: () => void
  dismissible?: boolean
  children?: React.ReactNode
}

const alertIcons: Record<AlertVariant, string> = {
  info: 'ℹ️',
  success: '✓',
  warning: '⚠️',
  error: '✕',
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  (
    {
      variant = 'info',
      title,
      description,
      onClose,
      dismissible = false,
      className = '',
      children,
      ...props
    },
    ref
  ) => {
    const [isVisible, setIsVisible] = useState(true)

    const handleClose = () => {
      setIsVisible(false)
      onClose?.()
    }

    if (!isVisible) return null

    const variantClass = styles[`alert--${variant}`] || ''

    return (
      <div
        ref={ref}
        className={`${styles.alert} ${variantClass} ${className}`.trim()}
        role="alert"
        {...props}
      >
        <span className={styles.alert__icon}>{alertIcons[variant]}</span>
        <div className={styles.alert__content}>
          {title && <span className={styles.alert__title}>{title}</span>}
          {description && <span className={styles.alert__description}>{description}</span>}
          {children}
        </div>
        {dismissible && (
          <button className={styles.alert__close} onClick={handleClose} aria-label="Close alert">
            ×
          </button>
        )}
      </div>
    )
  }
)

Alert.displayName = 'Alert'

export default Alert