import { Alert, AlertDescription } from "@/components/ui/alert";
import { getWidgetDefinition } from "../widgets/registry";
import type { WidgetInstance } from "../types";
import { SectionCard } from "./SectionCard";

interface Props {
	widget: WidgetInstance;
}

export function WidgetInstance({ widget }: Props) {
	const def = getWidgetDefinition(widget.widget_type);
	if (!def) {
		return (
			<SectionCard title={widget.title}>
				<Alert>
					<AlertDescription>
						Unknown widget type: {widget.widget_type}
					</AlertDescription>
				</Alert>
			</SectionCard>
		);
	}

	const Component = def.component;
	return <Component widget={widget} />;
}