"use client";

import { FC, PropsWithChildren } from "react";
import { Button } from "@mantine/core";
import { useViewContext, View } from "@/app/deals/contexts/ViewContext";
import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
import style from "./ViewSelectButton.module.css";

type Props = {
    viewName: View;
};

const ViewSelectButton: FC<PropsWithChildren<Props>> = ({
    viewName,
    children,
}) => {
    const { view, setView } = useViewContext();

    return (
        <SmallPageBlock
            active={view === viewName}
            style={{ borderRadius: "var(--mantine-radius-xl)" }}>
            <Button
                unstyled
                onClick={() => setView(viewName)}
                radius="xl"
                className={style.container}>
                {children}
            </Button>
        </SmallPageBlock>
    );
};

export default ViewSelectButton;
