import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { ArrowLeft } from "lucide-react";
import orionLogo from "@/assets/orion-logo.svg";
import { defaultCourseHeroContent } from "./course-hero/defaultContent";

type Content = Record<string, unknown>;

const emptyWeeklyTimeLabel = "—";

export function CourseHeroBlock({ content }: { content?: Content }) {
  const backLabel = (content?.backLabel as string) ?? defaultCourseHeroContent.backLabel;
  const backHref = (content?.backHref as string) ?? defaultCourseHeroContent.backHref;
  const emoji = (content?.emoji as string) ?? defaultCourseHeroContent.emoji;
  const name = (content?.name as string)?.trim() || "This Course";
  const tagline = (content?.tagline as string) ?? defaultCourseHeroContent.tagline;
  const courseType = (content?.courseType as string) ?? defaultCourseHeroContent.courseType;
  const duration = (content?.duration as string) ?? defaultCourseHeroContent.duration;
  const weeklyTimeK5 = (content?.weeklyTimeK5 as string)?.trim() || emptyWeeklyTimeLabel;
  const weeklyTime612 = (content?.weeklyTime612 as string)?.trim() || emptyWeeklyTimeLabel;

  const metaItems = [
    { icon: "📚", label: "Course Type", value: courseType },
    { icon: "📅", label: "Duration", value: duration },
    { icon: "⏱️", label: "K-5 Weekly", value: weeklyTimeK5 },
    { icon: "🎯", label: "6-12 Weekly", value: weeklyTime612 },
  ];

  return (
    <>
      <header className="orion-gradient py-12 md:py-20">
        <div className="container mx-auto px-6">
          <div className="flex items-center justify-between mb-6">
            <Link
              to={backHref}
              className="inline-flex items-center gap-2 text-milk/70 hover:text-milk font-display text-sm transition-colors"
            >
              <ArrowLeft className="w-4 h-4" /> {backLabel}
            </Link>
            <img src={orionLogo} alt="Orion STEM Schools" className="h-10 md:h-14" />
          </div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <span className="text-5xl md:text-6xl block mb-3">{emoji}</span>
            <h1 className="font-display text-3xl md:text-5xl font-bold text-milk">{name}</h1>
            <p className="font-display text-base md:text-lg text-milk/80 mt-2 max-w-3xl">{tagline}</p>
          </motion.div>
        </div>
      </header>

      <div className="bg-card border-b-4 border-deep-sea">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-border">
            {metaItems.map((meta) => (
              <div key={meta.label} className="py-4 text-center">
                <span className="text-2xl block mb-1">{meta.icon}</span>
                <span className="text-[0.65rem] uppercase tracking-wider text-muted-foreground block mb-0.5">
                  {meta.label}
                </span>
                <span className="font-display text-sm font-bold text-deep-sea">{meta.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}