import useCategories from "@/lib/callWidget/hooks/useCategories";
import { Chip, Divider, Grid, Stack } from "@mui/material";
import CallActionSubcategoriesButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton";
import { useTranslations } from "next-intl";

const CallActionsSubcategories = ({ tab, handleSubcategoryButton }) => {
    const { subCategoryLists } = useCategories();
    const t = useTranslations();
    return (
        <>
            <Divider sx={{margin : 2}}><Chip label={t("CallAction.subcategories")} variant="outlined"/></Divider>
            <Stack sx={{m : 1, p : 1 }} direction={"row"}>
                <Grid container spacing={2}>
                    {subCategoryLists.map((sub_category, index) => {
                        return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} handleSubcategoryButton={handleSubcategoryButton}/>;
                    })}
                </Grid>
            </Stack>
        </>
    );
};
export default CallActionsSubcategories;
