interface InfoBoxProps {
  variant: 'info' | 'tip' | 'warning' | 'error'
  title?: string
  children: React.ReactNode
  className?: string
}

const variants = {
  info: {
    bg: 'bg-blue-50',
    border: 'border-blue-200',
    icon: '💡',
    titleColor: 'text-blue-800',
    textColor: 'text-blue-700',
  },
  tip: {
    bg: 'bg-green-50',
    border: 'border-green-200',
    icon: '✨',
    titleColor: 'text-green-800',
    textColor: 'text-green-700',
  },
  warning: {
    bg: 'bg-amber-50',
    border: 'border-amber-200',
    icon: '⚠️',
    titleColor: 'text-amber-800',
    textColor: 'text-amber-700',
  },
  error: {
    bg: 'bg-red-50',
    border: 'border-red-200',
    icon: '❌',
    titleColor: 'text-red-800',
    textColor: 'text-red-700',
  },
}

export function InfoBox({ variant, title, children, className = '' }: InfoBoxProps) {
  const style = variants[variant]

  return (
    <div className={`${style.bg} ${style.border} border rounded-xl p-4 ${className}`}>
      <div className="flex gap-3">
        <span className="text-xl flex-shrink-0">{style.icon}</span>
        <div>
          {title && (
            <h4 className={`font-semibold ${style.titleColor} mb-1`}>{title}</h4>
          )}
          <div className={`text-sm ${style.textColor}`}>{children}</div>
        </div>
      </div>
    </div>
  )
}

// Convenience components
export function InfoTip({ title, children, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="tip" title={title} className={className}>{children}</InfoBox>
}

export function InfoWarning({ title, children, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="warning" title={title} className={className}>{children}</InfoBox>
}

export function InfoNote({ title, children, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="info" title={title} className={className}>{children}</InfoBox>
}

export function InfoError({ title, children, className }: Omit<InfoBoxProps, 'variant'>) {
  return <InfoBox variant="error" title={title} className={className}>{children}</InfoBox>
}