import { createApp, h } from 'vue';
import '../../resources/css/app.css';
import AppearanceTabs from '../../resources/js/components/AppearanceTabs.vue';
import AlertError from '../../resources/js/components/AlertError.vue';
import { Button } from '../../resources/js/components/ui/button';
import { createAppearance } from '../../resources/js/composables/useAppearance';
import { createLocalization } from '../../resources/js/lib/localization';

const localization = createLocalization();
createApp({
    render: () =>
        h('main', { class: 'mx-auto grid max-w-xl gap-column p-page' }, [
            h('h1', { class: 'text-headline' }, 'Emerald design system'),
            h(AppearanceTabs),
            h(
                'section',
                {
                    class: 'grid gap-column rounded-md border bg-card p-card text-card-foreground',
                },
                [
                    h('h2', { class: 'text-title' }, 'Readable surfaces'),
                    h(
                        'p',
                        { class: 'text-muted-foreground' },
                        'Inter, emerald actions and a visible keyboard focus.',
                    ),
                    h('label', { for: 'sample-input' }, 'Sample input'),
                    h('input', {
                        id: 'sample-input',
                        class: 'min-h-control rounded-md border border-input bg-background px-3',
                        placeholder: 'Type here',
                    }),
                    h('div', { class: 'flex flex-wrap gap-stack' }, [
                        h(Button, {}, () => localization.t('common.save')),
                        h(Button, { variant: 'secondary' }, () =>
                            localization.t('common.cancel'),
                        ),
                        h(Button, { variant: 'destructive' }, () => 'Delete'),
                    ]),
                    h(AlertError, { errors: ['A readable validation error.'] }),
                ],
            ),
        ]),
})
    .use(localization)
    .use(createAppearance())
    .mount('#app');