import { Tabs } from "@mantine/core";
import { IconBriefcase, IconSitemap } from "@tabler/icons-react";
import { motion } from "framer-motion";
import RolesAndPositions from "./components/RolesAndPositions.tsx";
import Departments from "./components/Departments.tsx";


const OrganizationalStructureTab = () => {
    return (
        <Tabs
            keepMounted={false}
            defaultValue={"departments"}
            color={"gray.6"}>
            <Tabs.List
                justify={"center"}
                grow>
                <Tabs.Tab
                    value={"departments"}
                    leftSection={<IconSitemap />}>
                    Департаменты и отделы
                </Tabs.Tab>
                <Tabs.Tab
                    value={"positions"}
                    leftSection={<IconBriefcase />}>
                    Должности
                </Tabs.Tab>
            </Tabs.List>
            <Tabs.Panel value={"departments"}>
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.2 }}>
                    <Departments />
                </motion.div>
            </Tabs.Panel>
            <Tabs.Panel value={"positions"}>
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.2 }}>
                    <RolesAndPositions />
                </motion.div>
            </Tabs.Panel>
        </Tabs>
    );
};

export default OrganizationalStructureTab;
