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

interface HintProps {
  children: React.ReactNode;
  variant?: 'tip' | 'warning' | 'note';
}

const variantStyles = {
  tip: {
    container: 'bg-blue-50 text-blue-800 border-blue-200',
    icon: <Lightbulb className="w-4 h-4 text-blue-600" />,
  },
  warning: {
    container: 'bg-yellow-50 text-yellow-800 border-yellow-200',
    icon: <AlertCircle className="w-4 h-4 text-yellow-600" />,
  },
  note: {
    container: 'bg-zinc-50 text-zinc-800 border-zinc-200',
    icon: <Info className="w-4 h-4 text-zinc-600" />,
  },
};

export default function Hint({ children, variant = 'note' }: HintProps) {
  const style = variantStyles[variant];

  return (
    <div className={`flex items-start gap-3 p-3 rounded-md border text-sm ${style.container}`}>
      <div className="mt-0.5 shrink-0">
        {style.icon}
      </div>
      <div className="leading-relaxed">
        {children}
      </div>
    </div>
  );
}