import { FC } from "react";
import { IconLayoutDistributeVertical, IconTable } from "@tabler/icons-react";
import {
    Affix,
    Center,
    SegmentedControl,
    SegmentedControlProps,
} from "@mantine/core";
import styles from "../../../FulfillmentBase.module.css";

export enum ProductsTabView {
    TABLE = "table",
    SLIDER = "slider",
}

type Props = Omit<SegmentedControlProps, "data">;

const ProductsTabViewAffix: FC<Props> = props => {
    return (
        <Affix
            bdrs={"xl"}
            bd={"1px solid var(--mantine-color-default-border"}
            className={styles.shadow}
            position={{ bottom: 10, right: 10 }}>
            <Center>
                <SegmentedControl
                    bdrs={"xl"}
                    radius={"lg"}
                    data={[
                        {
                            value: ProductsTabView.SLIDER,
                            label: <IconLayoutDistributeVertical />,
                        },
                        {
                            value: ProductsTabView.TABLE,
                            label: <IconTable />,
                        },
                    ]}
                    {...props}
                />
            </Center>
        </Affix>
    );
};

export default ProductsTabViewAffix;
