import React from "react";
import {ArrowDropDown, ArrowDropUp} from "@mui/icons-material";
import {Box, SvgIconProps} from "@mui/material";

const CustomSortIcon: React.FC<{ active: boolean; direction: 'asc' | 'desc' }> = ({active, direction}) => {
    if (active) {
        return direction === 'asc' ? <ArrowDropUp/> : <ArrowDropDown/>;
    }
    return (
        <Box sx={{display: 'flex', flexDirection: 'column', lineHeight: 1}}>
            <ArrowDropUp fontSize="small" sx={{lineHeight: 1, margin: '-4px 0 -7px 0'}}/>
            <ArrowDropDown fontSize="small" sx={{lineHeight: 1, margin: '-7px 0 -4px 0'}}/>
        </Box>
    );
};

const getIconComponent = (active: boolean, direction: 'asc' | 'desc') => {
    const IconComponent: React.FC<SvgIconProps> = () => (
        <CustomSortIcon active={active} direction={direction}/>
    );
    return IconComponent;
};

export default getIconComponent;
