import { useContext, useEffect, useState } from "react";
import { type Theme, WidgetConfigContext } from "../Providers/ConfigProvider";

const defaultValues: Theme = {
	borderRadius: "base",
	width: 420,
};

export const useTheme = (): Theme => {
	const configContext = useContext(WidgetConfigContext);
	const [widgetTheme, setWidgetTheme] = useState<Theme>(defaultValues);

	useEffect(() => {
		const theme = {
			...defaultValues,
			...configContext?.theme,
		};

		setWidgetTheme(theme);
	}, [configContext]);

	return widgetTheme;
};
