import { Chip, Divider, Grid, Stack } from "@mui/material";
import useCategories from "@/lib/callWidget/hooks/useCategories";
import CallActionCategoriesButton from "./CallActionCategoriesButton";
import { useTranslations } from "next-intl";

const CallActionsCategories = ({ tab }) => {
    const { categoryLists } = useCategories();
    const t = useTranslations();
    return (
        <>
            <Divider sx={{margin : 2}}><Chip label={t("CallAction.categories")} variant="outlined"/></Divider>
            <Stack sx={{m : 1, p : 1}} direction={"row"}>
                <Grid container spacing={2}>
                    {categoryLists.map((category) => {
                        return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
                    })}
                </Grid>
            </Stack>
        </>
    );
};
export default CallActionsCategories;
