import { Link } from "react-router-dom";
import { grades as defaultGrades } from "@/data/portraitData";

type Content = Record<string, unknown>;

type GradeItem = { id: string; label?: string; shortLabel: string; route: string; available: boolean };

function parseItems(content: Content | undefined): GradeItem[] {
  const raw = content?.items;
  if (!Array.isArray(raw) || raw.length === 0) return defaultGrades;
  return raw.map((x: unknown) => {
    const o = x as Record<string, unknown>;
    return {
      id: typeof o?.id === "string" ? o.id : String(o?.shortLabel ?? ""),
      shortLabel: typeof o?.shortLabel === "string" ? o.shortLabel : "",
      route: typeof o?.route === "string" ? o.route : "#",
      available: o?.available === true,
    };
  });
}

export function GradeFamilyGuidesBlock({ content }: { content?: Content }) {
  const heading = (content?.heading as string) ?? "Family Guides by Grade";
  const footerText = (content?.footerText as string) ?? "KG is live · Other grades coming soon";
  const gradeItems = parseItems(content);
  return (
    <section className="py-10 bg-card">
      <div className="container mx-auto px-6 max-w-3xl text-center">
        <p className="font-display text-xs tracking-[0.2em] uppercase text-deep-sea mb-4">{heading}</p>
        <div className="flex flex-wrap justify-center gap-2">
          {gradeItems.map((g) =>
            g.available ? (
              <Link key={g.id} to={g.route} className="inline-flex items-center justify-center font-display text-sm font-bold rounded-full w-12 h-12 bg-deep-sea text-milk hover:bg-valencia transition-colors shadow-md hover:shadow-lg">
                {g.shortLabel}
              </Link>
            ) : (
              <span key={g.id} className="inline-flex items-center justify-center font-display text-sm font-medium rounded-full w-12 h-12 bg-secondary text-muted-foreground cursor-not-allowed" title="Coming soon">
                {g.shortLabel}
              </span>
            )
          )}
        </div>
        <p className="text-muted-foreground text-xs mt-3 font-display">{footerText}</p>
      </div>
    </section>
  );
}