import { portraitDimensions } from "@/data/portraitData";

type Content = Record<string, unknown>;

export function DimensionDetailBlock({ content }: { content?: Content }) {
  const sectionTitle = (content?.sectionTitle as string) || "Character Traits & Mindsets";
  const sectionSubtitle = (content?.sectionSubtitle as string) || "Courses at Orion";
  const selected = portraitDimensions[0];
  return (
    <section className="bg-background">
      <div className="container mx-auto px-6 py-10 max-w-5xl">
        <div className="rounded-2xl border-2 border-valencia bg-card p-6 md:p-8">
          <div className="flex items-center gap-3 mb-2">
            <span className="text-3xl">{selected.emoji}</span>
            <div>
              <h2 className="font-display text-xl md:text-2xl font-bold text-foreground">{selected.title}</h2>
              <p className="text-muted-foreground text-sm">{selected.desc}</p>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-8 mt-6">
            <div>
              <p className="font-display text-xs tracking-[0.2em] uppercase text-muted-foreground mb-4">{sectionTitle}</p>
              <p className="text-muted-foreground text-sm">Select a dimension on the hero to explore traits and courses.</p>
            </div>
            <div>
              <p className="font-display text-xs tracking-[0.2em] uppercase text-muted-foreground mb-4">{sectionSubtitle}</p>
              <p className="text-muted-foreground text-sm">Course data appears when a dimension is selected.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}