import { motion } from "framer-motion";
import { yearOverview } from "@/data/curriculum";

type Content = Record<string, unknown>;

export function EssentialQuestionBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? "Essential Question";
  const question = (content?.question as string) ?? yearOverview.essentialQuestion;

  return (
    <motion.section
      className="bg-card py-16"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.5 }}
    >
      <div className="container mx-auto px-6 text-center max-w-3xl">
        <p className="font-display text-xs tracking-[0.2em] uppercase text-deep-sea mb-4">
          {heading}
        </p>
        <h2 className="font-display text-2xl md:text-3xl font-semibold text-foreground italic leading-relaxed">
          "{question}"
        </h2>
      </div>
    </motion.section>
  );
}