/**
 * Info Callout Component
 * Colored callout box for important messages
 */
import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';

const InfoCallout = ({ type = 'info', title, children, className = '' }) => {
	const configs = {
		info: {
			Icon: Info,
			bgColor: '',
			borderColor: 'border-[#dbeafe]',
			iconColor: 'text-[#2563eb]',
			textColor: 'text-gray-900',
		},
		warning: {
			Icon: AlertTriangle,
			bgColor: 'bg-yellow-50',
			borderColor: 'border-yellow-200',
			iconColor: 'text-yellow-600',
			textColor: 'text-yellow-900',
		},
		success: {
			Icon: CheckCircle,
			bgColor: 'bg-green-50',
			borderColor: 'border-green-200',
			iconColor: 'text-green-600',
			textColor: 'text-green-900',
		},
		error: {
			Icon: XCircle,
			bgColor: 'bg-red-50',
			borderColor: 'border-red-200',
			iconColor: 'text-red-600',
			textColor: 'text-red-900',
		},
	};

	const config = configs[type] || configs.info;
	const Icon = config.Icon;

	return (
		<div
			className={`${type !== 'info' ? config.bgColor : ''} border ${config.borderColor} rounded-oa-md p-4 flex gap-3 ${className}`}
			style={{ backgroundColor: type === 'info' ? '#dbeafe' : undefined }}
		>
			<Icon className={`w-5 h-5 ${config.iconColor} flex-shrink-0 mt-0.5`} />
			<div className={`text-oa-sm ${config.textColor} flex-1`}>
				{title && <strong className="font-oa-semibold block mb-1">{title}</strong>}
				<div>{children}</div>
			</div>
		</div>
	);
};

export default InfoCallout;