import { FC } from "react";
import {
    IconCalendarWeekFilled,
    IconLayoutDashboard,
    IconMenu2,
} from "@tabler/icons-react";
import { Group } from "@mantine/core";
import { View } from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
import ViewSelectButton from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton";

type Props = {
    value: View;
    onChange: (view: View) => void;
};

const ViewSelector: FC<Props> = ({ value, onChange }) => {
    const views = [
        {
            value: "board" as View,
            icon: <IconLayoutDashboard />,
        },
        {
            value: "table" as View,
            icon: <IconMenu2 />,
        },
        {
            value: "schedule" as View,
            icon: <IconCalendarWeekFilled />,
        },
    ];

    return (
        <Group>
            {views.map(view => (
                <ViewSelectButton
                    key={view.value}
                    selected={value === view.value}
                    onSelect={() => onChange(view.value)}>
                    {view.icon}
                </ViewSelectButton>
            ))}
        </Group>
    );
};

export default ViewSelector;
