import { Button, Heading, LayoutFlex, Link, Text } from '@preply/ds-web-lib';
import { Meta } from '@storybook/react-vite';
import React from 'react';

const PLAYGROUND_URL = 'https://stackblitz.com/edit/vitejs-vite-gubupy9n?file=src%2FApp.tsx';

const meta: Meta = {
    title: 'Playground',
    tags: ['!autodocs', '!test', '!manifest'],
    parameters: {
        controls: {
            disable: true,
        },
        chromatic: { disableSnapshot: true },
    },
};

export default meta;

export const Playground = () => {
    return (
        <LayoutFlex direction="column" gap="16" padding="24">
            <Heading tag="h1" variant="medium">
                Playground
            </Heading>
            <Text>
                Try Path components against the latest release in a live StackBlitz sandbox — edit
                the code and see it render, with no local setup.
            </Text>
            <LayoutFlex>
                <Button href={PLAYGROUND_URL} opensInNewTab>
                    Open the playground
                </Button>
            </LayoutFlex>
            <Text variant="sm">
                Opens in a new tab. Requires a Chromium-based browser or Firefox — see{' '}
                <Link
                    href="https://developer.stackblitz.com/platform/webcontainers/browser-support"
                    inline
                >
                    StackBlitz browser support
                </Link>
                .
            </Text>
        </LayoutFlex>
    );
};