import React from 'react'

export type CalloutVariant = 'info' | 'warning' | 'error' | 'tip'

export interface CalloutProps {
  variant?: CalloutVariant
  children: React.ReactNode
  className?: string
}

const config: Record<CalloutVariant, { wrapper: string; icon: string; iconColor: string }> = {
  info:    { wrapper: 'bg-teal-50 border-teal-200 text-teal-700',   iconColor: 'text-teal-500',  icon: 'info'     },
  warning: { wrapper: 'bg-amber-50 border-amber-200 text-amber-700', iconColor: 'text-amber-500', icon: 'warning'  },
  error:   { wrapper: 'bg-red-50 border-red-200 text-red-700',       iconColor: 'text-red-500',   icon: 'error'    },
  tip:     { wrapper: 'bg-blue-50 border-blue-200 text-blue-700',    iconColor: 'text-blue-500',  icon: 'lightbulb'},
}

export const Callout: React.FC<CalloutProps> = ({ variant = 'info', children, className = '' }) => {
  const { wrapper, icon, iconColor } = config[variant]
  return (
    <div className={`flex items-center gap-2 p-2.5 border rounded-[10px] text-caption leading-relaxed ${wrapper} ${className}`}>
      <span className={`material-symbols-outlined text-body-md shrink-0 leading-none ${iconColor}`}>{icon}</span>
      <span>{children}</span>
    </div>
  )
}