import { Info, Lightbulb, AlertTriangle } from 'lucide-react';

type InfoBoxType = 'info' | 'tip' | 'warning';

interface BlogInfoBoxProps {
  type?: InfoBoxType;
  title: string;
  children: React.ReactNode;
}

const typeConfig = {
  info: {
    icon: Info,
    borderColor: 'border-blue-500',
    bgColor: 'bg-blue-50',
    iconColor: 'text-blue-600',
  },
  tip: {
    icon: Lightbulb,
    borderColor: 'border-amber-500',
    bgColor: 'bg-amber-50',
    iconColor: 'text-amber-600',
  },
  warning: {
    icon: AlertTriangle,
    borderColor: 'border-red-500',
    bgColor: 'bg-red-50',
    iconColor: 'text-red-600',
  },
};

export const BlogInfoBox = ({
  type = 'info',
  title,
  children,
}: BlogInfoBoxProps) => {
  const config = typeConfig[type];
  const Icon = config.icon;

  return (
    <div
      className={`my-8 rounded-lg border-l-4 ${config.borderColor} ${config.bgColor} p-6 shadow-sm`}
    >
      <div className="flex items-start gap-4">
        <div className="flex-shrink-0 mt-0.5">
          <Icon className={`w-5 h-5 ${config.iconColor}`} />
        </div>
        <div>
          <h5 className="font-bold text-gray-900 mt-0 mb-2">{title}</h5>
          <div className="text-sm text-gray-700 leading-relaxed">{children}</div>
        </div>
      </div>
    </div>
  );
};
