export default function Alert({ type = 'error', message, onClose }) {
  if (!message) return null;

  const styles = {
    error: 'bg-red-50 text-red-800 border-red-200',
    success: 'bg-green-50 text-green-800 border-green-200',
    warning: 'bg-yellow-50 text-yellow-800 border-yellow-200',
    info: 'bg-blue-50 text-blue-800 border-blue-200',
  };

  return (
    <div className={`rounded-lg border p-3 text-sm mb-4 ${styles[type]}`}>
      <div className="flex justify-between items-start">
        <span>{message}</span>
        {onClose && (
          <button onClick={onClose} className="ml-2 font-bold opacity-60 hover:opacity-100">
            &times;
          </button>
        )}
      </div>
    </div>
  );
}
