'use client';
import { useState } from 'react';
import type { ThemeDefinition, ComponentSheet } from '@fayegram-ai/faye-ui/contracts';
import { ThemeEditor } from '@fayegram-ai/faye-ui/devtools/theme-editor';
import { ComponentSheetEditor } from '@fayegram-ai/faye-ui/devtools/sheet-editor';
import { buttonDescriptor } from '@fayegram-ai/faye-ui/controls/button.descriptor';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { defaultTheme } from '@fayegram-ai/faye-ui/tokens/default-theme';
export default function Studio() {
    const [theme, setTheme] = useState<ThemeDefinition>(defaultTheme);
    const [sheet, setSheet] = useState<ComponentSheet>({ schemaVersion: 1, id: 'studio.button', component: 'button', rules: [] });
    return <><ThemeEditor theme={theme} onChange={setTheme}/><ComponentSheetEditor sheet={sheet} onChange={setSheet} descriptor={buttonDescriptor}><Button>Real sheet preview</Button></ComponentSheetEditor></>;
}