import { jsx, jsxs } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Tab from "@mui/material/Tab";
import Tabs from "@mui/material/Tabs";
import Typography from "@mui/material/Typography";
import { useState } from "react";
const materialParameters = {
    material: true
};
function Section({ title, description, children }) {
    return /*#__PURE__*/ jsxs(Box, {
        component: "section",
        sx: {
            mb: 6
        },
        children: [
            /*#__PURE__*/ jsx(Typography, {
                variant: "h6",
                sx: {
                    mb: 0.5
                },
                children: title
            }),
            description && /*#__PURE__*/ jsx(Typography, {
                variant: "body2",
                sx: {
                    color: 'text.secondary',
                    mb: 2
                },
                children: description
            }),
            children
        ]
    });
}
function Row({ label, children }) {
    return /*#__PURE__*/ jsxs(Box, {
        sx: {
            mb: 2
        },
        children: [
            label && /*#__PURE__*/ jsx(Typography, {
                variant: "body2",
                sx: {
                    fontWeight: 600,
                    mb: 1
                },
                children: label
            }),
            /*#__PURE__*/ jsx(Stack, {
                direction: "row",
                spacing: 2,
                useFlexGap: true,
                sx: {
                    flexWrap: 'wrap',
                    alignItems: 'center'
                },
                children: children
            })
        ]
    });
}
function ImportLine({ statement }) {
    return /*#__PURE__*/ jsx(Box, {
        component: "code",
        sx: (theme)=>({
                display: 'block',
                fontFamily: 'monospace',
                fontSize: 12,
                px: 1.5,
                py: 1,
                mb: 3,
                borderRadius: 1,
                color: theme.palette.semantic.colorForegroundDeEmp,
                backgroundColor: theme.palette.semantic.colorBackgroundSecondary,
                border: `1px solid ${theme.palette.semantic.colorBorderDeEmp}`,
                width: 'fit-content'
            }),
        children: statement
    });
}
function ConsumptionTabs({ mui, ap, muiImport, apImport }) {
    const [tab, setTab] = useState(0);
    return /*#__PURE__*/ jsxs(Box, {
        children: [
            /*#__PURE__*/ jsxs(Tabs, {
                value: tab,
                onChange: (_, value)=>setTab(value),
                sx: {
                    mb: 2
                },
                children: [
                    /*#__PURE__*/ jsx(Tab, {
                        label: "MUI + theme overrides"
                    }),
                    /*#__PURE__*/ jsx(Tab, {
                        label: "Ap component"
                    })
                ]
            }),
            /*#__PURE__*/ jsx(ImportLine, {
                statement: 0 === tab ? muiImport : apImport
            }),
            0 === tab ? mui : ap
        ]
    });
}
export { ConsumptionTabs, Row, Section, materialParameters };
