componentfilter.tsx

import { useEffect, useState } from "react";
import { HeadingBlock } from "./blocks/Heading";
import { AccordionBlock } from "./blocks/Accordion";
import { ImageCarouselBlock } from "./blocks/ImageCarousel";

interface ComponentFilterProps {
	component: any;
}

export function ComponentFilter({ component }: ComponentFilterProps) {
	const [componentName] = useState(Object.keys(component)[0]);
	const [componentData, setComponentData] = useState<any>(
		Object.values(component)[0]
	);

	useEffect(() => {
		if (componentData.items) {
			setComponentData(componentData.items[0].content);
		}
	}, [componentData]);

	if (componentData.contentType === "heading") {
		return <HeadingBlock data={componentData} />;
	}

	if (componentData.contentType === "accordion") {
		return <AccordionBlock data={componentData} />;
	}

	if (componentData.contentType === "imageCarousel") {
		return <ImageCarouselBlock data={componentData} />;
	}

	return (
		<div>
			<p>{componentName}</p>
		</div>
	);
}