import React, { useState, useEffect } from "react";
import { allThemes, type Theme } from "@/lib/interactives";
interface InteractiveBreadcrumbProps {
title: string;
themes: string[];
subcategory?: string;
}
const Chevron = () => (
);
const InteractiveBreadcrumb: React.FC = ({
title,
themes,
subcategory,
}) => {
const [activeTheme, setActiveTheme] = useState(undefined);
const [activeSub, setActiveSub] = useState<
{ slug: string; title: string } | undefined
>(undefined);
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const fromSlug = params.get("from");
let theme: Theme | undefined;
if (fromSlug) {
// Try to match the from param to a theme the interactive belongs to
theme = allThemes.find(
(t) => t.slug === fromSlug && themes.includes(t.title)
);
}
// Fall back to primary theme (first in array)
if (!theme) {
theme = allThemes.find((t) => t.title === themes[0]);
}
setActiveTheme(theme);
// Resolve subcategory if present and theme matches
if (subcategory && theme?.subcategories) {
const sub = theme.subcategories.find((s) => s.slug === subcategory);
setActiveSub(sub ? { slug: sub.slug, title: sub.title } : undefined);
}
}, [themes, subcategory]);
return (
);
};
export default InteractiveBreadcrumb;