import { BrandscapeShell } from "@/components/BrandscapeShell";
type Content = Record<string, unknown>;

function str(c: unknown): string {
  return typeof c === "string" ? c : "";
}

const defaultTitle = "What is PBEL?";
const defaultBody =
  "Problem‑Based Experiential Learning is where students learn by tackling real community challenges. They investigate needs, design and test solutions, measure impact, and share results — building academic skills through meaningful action.";

export function WhatIsPbelBlock({ content }: { content?: Content }) {
  const title = str(content?.title).trim() || defaultTitle;
  const body = str(content?.body).trim() || defaultBody;

  return (
    <BrandscapeShell variant="narrow">
    <div className="bg-gradient-to-br from-primary/10 to-mist/20 rounded-2xl p-4 border-l-4 border-primary mb-1">
      <p className="font-bold text-[13px] uppercase tracking-wider text-primary mb-1">{title}</p>
      <p className="text-[13px] leading-relaxed text-muted-foreground">{body}</p>
    </div>
    </BrandscapeShell>
  );
}