import { Accordion, Button, Grid, useMantineTheme } from "@mantine/core";

function ThemePanel({ children }: any) {
    const mantineTheme = useMantineTheme();

    return (
        <div className="h-full shadow-xl p-2 rounded-lg" style={{ backgroundColor: mantineTheme.colors.dark[7] }}>
            {children}
        </div>
    );
}

function App() {
    return (
        <Grid grow gutter="xl" className="h-full">
            <Grid.Col span={4}>
                <ThemePanel>
                    <p>Some content</p>
                    <div className="flex flex-col gap-y-4">
                        <Button className="w-fit">Clicky!</Button>
                        <Accordion defaultValue="customization">
                            <Accordion.Item value="customization">
                                <Accordion.Control>Customization</Accordion.Control>
                                <Accordion.Panel>Colors, fonts, shadows and many other parts are customizable to fit your design needs</Accordion.Panel>
                            </Accordion.Item>

                            <Accordion.Item value="flexibility">
                                <Accordion.Control>Flexibility</Accordion.Control>
                                <Accordion.Panel>
                                    Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
                                </Accordion.Panel>
                            </Accordion.Item>

                            <Accordion.Item value="focus-ring">
                                <Accordion.Control>No annoying focus ring</Accordion.Control>
                                <Accordion.Panel>
                                    With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
                                </Accordion.Panel>
                            </Accordion.Item>
                        </Accordion>
                    </div>
                </ThemePanel>
            </Grid.Col>
            <Grid.Col span={4}>
                <ThemePanel>
                    <p>iMask sucks</p>
                    <Button color={"cyan"}>Some color</Button>
                </ThemePanel>
            </Grid.Col>
            <Grid.Col span={4}>
                <ThemePanel>noob!</ThemePanel>
            </Grid.Col>
        </Grid>
    );
}

export default App;