const MOOD_STYLES: Record<string, { border: string; bg: string; color: string }> = {
  default: { border: "var(--z-border)", bg: "var(--z-card-bg)", color: "var(--z-text)" },
  success: { border: "rgba(34,197,94,0.3)", bg: "rgba(34,197,94,0.05)", color: "#4ade80" },
  warning: { border: "rgba(234,179,8,0.3)", bg: "rgba(234,179,8,0.05)", color: "#facc15" },
  danger:  { border: "rgba(239,68,68,0.3)", bg: "rgba(239,68,68,0.05)", color: "#f87171" },
};

interface HintProps {
  text: string;
  mood?: "default" | "success" | "warning" | "danger";
  icon?: string;
}

export function Hint({ text, mood = "default", icon }: HintProps) {
  const s = MOOD_STYLES[mood] || MOOD_STYLES.default;
  return (
    <div class="flex items-start gap-2 px-3 py-2.5 rounded-[var(--z-radius-card)] mb-3 text-[var(--z-font-md)]" style={{ border: `1px solid ${s.border}`, background: s.bg, color: s.color }}>
      {icon && <span class="shrink-0">{icon}</span>}
      <span style={{ opacity: 0.9 }}>{text}</span>
    </div>
  );
}
