full_encoach_platform/frontend/src/components/lesson/InfographicBlock.tsx

import {
  Lightbulb,
  Target,
  CheckCircle2,
  AlertTriangle,
  Info,
  Star,
  Sparkles,
  type LucideIcon,
} from "lucide-react";

type Tone = "tip" | "info" | "warn" | "success" | "highlight" | "example";

const TONE_STYLE: Record<Tone, { wrapper: string; icon: LucideIcon; iconClass: string; title: string }> = {
  tip:       { wrapper: "border-amber-200 bg-amber-50",       icon: Lightbulb,    iconClass: "text-amber-600",      title: "text-amber-900" },
  info:      { wrapper: "border-blue-200 bg-blue-50",         icon: Info,         iconClass: "text-blue-600",       title: "text-blue-900" },
  warn:      { wrapper: "border-rose-200 bg-rose-50",         icon: AlertTriangle, iconClass: "text-rose-600",      title: "text-rose-900" },
  success:   { wrapper: "border-emerald-200 bg-emerald-50",   icon: CheckCircle2, iconClass: "text-emerald-600",    title: "text-emerald-900" },
  highlight: { wrapper: "border-purple-200 bg-purple-50",     icon: Sparkles,     iconClass: "text-purple-600",     title: "text-purple-900" },
  example:   { wrapper: "border-slate-200 bg-slate-50",       icon: Star,         iconClass: "text-slate-600",      title: "text-slate-900" },
};

/**
 * Visual callout block used inside lessons. The AI course generator now
 * emits keys like `did_you_know`, `key_takeaway`, `tip`, `warning`,
 * `objective`, `example`, etc. Instead of dumping them as `<h5>label</h5>
 * <p>text</p>` we render a coloured card with an icon — that's the
 * "infographic" treatment the design refresh asked for.
 */
export default function InfographicBlock({
  title,
  tone = "info",
  children,
  items,
}: {
  title: string;
  tone?: Tone;
  children?: React.ReactNode;
  items?: (string | { label?: string; value?: string })[];
}) {
  const style = TONE_STYLE[tone];
  const Icon = style.icon;
  return (
    <div className={`rounded-xl border ${style.wrapper} p-4 shadow-sm space-y-2`}>
      <div className="flex items-center gap-2">
        <span className="rounded-full bg-white/80 p-1.5 shadow-sm">
          <Icon className={`h-4 w-4 ${style.iconClass}`} />
        </span>
        <div className={`text-sm font-semibold ${style.title}`}>{title}</div>
      </div>
      {children && <div className="text-sm leading-7 text-foreground/90">{children}</div>}
      {items && items.length > 0 && (
        <ul className="space-y-1.5">
          {items.map((it, i) => {
            if (typeof it === "string") {
              return (
                <li key={i} className="flex items-start gap-2 text-sm">
                  <Target className="h-3.5 w-3.5 mt-1 text-muted-foreground shrink-0" />
                  <span>{it}</span>
                </li>
              );
            }
            return (
              <li key={i} className="flex items-start gap-2 text-sm">
                <Target className="h-3.5 w-3.5 mt-1 text-muted-foreground shrink-0" />
                <span>
                  {it.label && <strong className="me-1">{it.label}:</strong>}
                  {it.value}
                </span>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

const TONE_BY_KEY: Record<string, Tone> = {
  tip: "tip",
  hint: "tip",
  did_you_know: "tip",
  fun_fact: "tip",
  key_takeaway: "highlight",
  takeaway: "highlight",
  summary: "highlight",
  highlight: "highlight",
  objective: "info",
  objectives: "info",
  goal: "info",
  goals: "info",
  warning: "warn",
  pitfall: "warn",
  caution: "warn",
  common_mistakes: "warn",
  success_criteria: "success",
  remember: "success",
  example: "example",
  examples: "example",
};

export function inferTone(key: string): Tone | null {
  const norm = key.toLowerCase().replace(/[\s-]/g, "_");
  return TONE_BY_KEY[norm] ?? null;
}