import { motion } from "framer-motion";
import { quarters } from "@/data/curriculum";
import { fadeUpItem } from "@/components/PageTransition";

type Content = Record<string, unknown>;

type FinksItem = { category: string; emoji: string; description: string };

const defaultHeading = "Fink's Taxonomy of Significant Learning";
const defaultItems: FinksItem[] = quarters[0]?.finksTaxonomy ?? [];

function ensureFinksItem(raw: unknown): FinksItem {
  if (raw && typeof raw === "object" && "category" in raw) {
    const o = raw as Record<string, unknown>;
    return {
      category: typeof o.category === "string" ? o.category : "",
      emoji: typeof o.emoji === "string" ? o.emoji : "📚",
      description: typeof o.description === "string" ? o.description : "",
    };
  }
  return { category: "", emoji: "📚", description: "" };
}

export function FinksTaxonomyBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? defaultHeading;
  const rawItems = content?.items;
  const items: FinksItem[] = Array.isArray(rawItems)
    ? rawItems.map(ensureFinksItem)
    : defaultItems;

  return (
    <section className="py-16 bg-card">
      <div className="container mx-auto px-6 max-w-5xl">
        <motion.h2
          className="font-display text-2xl md:text-3xl font-bold text-foreground mb-6"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          {heading}
        </motion.h2>
        <motion.div
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-4"
          initial="initial"
          whileInView="animate"
          viewport={{ once: true }}
          variants={{ animate: { transition: { staggerChildren: 0.06 } } }}
        >
          {items.map((item) => (
            <motion.div
              key={item.category || item.description}
              variants={fadeUpItem}
              className="bg-background rounded-xl p-5 border border-border"
            >
              <span className="text-2xl block mb-2">{item.emoji}</span>
              <h3 className="font-display text-sm font-semibold text-foreground mb-1">{item.category}</h3>
              <p className="text-muted-foreground text-xs">{item.description}</p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}