import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { useOnboardingStep } from "../cmp/onboarding-flow";
import { configuredDefaultThemeId, useTheme } from "./Provider";
import { findTheme } from "./presets";
import { ThemeCustomizer } from "./pickers/StylePicker";
export function ThemeOnboardingPage({ value, onValueChange, }) {
    const { themes } = useTheme();
    const [localThemeId, setLocalThemeId] = useState(() => findTheme(themes, configuredDefaultThemeId())?.id ?? null);
    const chosenThemeId = value ?? localThemeId;
    useOnboardingStep({ canContinue: chosenThemeId !== null });
    const choose = (id) => {
        setLocalThemeId(id);
        onValueChange?.(id);
    };
    return _jsx(ThemeCustomizer, { value: chosenThemeId, onValueChange: choose });
}
