import { Box } from '@mui/system';
import ProductType from '../product-type/ProductType';
import Sort from '../sort/Sort';
import { SelectChangeEvent } from "@mui/material";

interface FilterSortProps {
    sort: string;
    handleSortChange: (e: SelectChangeEvent) => void;
    productType: string;
    handleProductTypeChange: (e: SelectChangeEvent) => void;
}

const FilterSort: React.FC<FilterSortProps> = ({
    sort,
    handleSortChange,
    productType,
    handleProductTypeChange,
}) => {
    return (
        <Box
            sx={{
                display: 'flex',
                flexDirection: { xs: 'column', sm: 'row' },
                justifyContent: { xs: 'center' },
                alignItems: { xs: 'center' },
            }}
        >
            <Sort sort={sort} handleSortChange={handleSortChange} />
            <ProductType
                productType={productType}
                handleProductTypeChange={handleProductTypeChange}
            />
        </Box>
    );
};

export default FilterSort;
