import Layout from "../components/layout";
import Header from "../components/header/header";
import { settingsHeader } from "../mock_data/settings.data";
import ButtonGroup from "../components/button-group/button-group";
import Typography from "../components/typography/typography";
import Button from "../components/button/button";
import SubHeader from "../components/settings/sub-header";
import Form from "../components/settings/form";
import { useState } from "react";

export default function Settings() {
    const [selected, setSelected] = useState<number>(0);

    return (
        <>
            {/* header to be shown in each page */}
            <Header data={settingsHeader} />
            {/* switch tabs - button groups */}
            <ButtonGroup
                items={[
                    {
                        label: "General",
                        onClick: () => console.log("General"),
                    },
                    {
                        label: "Users",
                        onClick: () => console.log("Users"),
                    },
                    {
                        label: "Billing",
                        onClick: () => console.log("Billing"),
                    },
                    {
                        label: "Integrations",
                        onClick: () => console.log("Integrations"),
                    },
                ]}
                variant="outlined"
                color="gray"
            />
            {/* sub header */}
            <SubHeader />
            {/* form */}
            <Form />
        </>
    );
}