import { Box, MenuItem, Select as MuiSelect, Typography, useTheme } from "@mui/material";
import { styled } from "@mui/material/styles";
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';

const StyledSelectInput = styled(MuiSelect, {
    shouldForwardProp: prop => prop !== "inputWidth"
})(({ theme, inputWidth }) => ({
    width: "100%",
    "& .MuiSelect-select": {
        padding: 0,
        height: "24px !important",
        minHeight: "24px !important",
        display: "flex",
        alignItems: "center",
        fontSize: "18px",
        fontWeight: 500,
        paddingRight: "24px",
    },
    "& .MuiOutlinedInput-notchedOutline": {
        border: "none",
    },
    "& .MuiSelect-icon": {
        right: 0,
        position: "absolute",
        color: theme.colors.gray[500],
    }
}));

const Select = ({
    label,
    value,
    onChange,
    options,
    inputWidth,
    renderValue = null,
    width = "100%",
}) => {
    const theme = useTheme();
    return (
        <Box
            display="flex"
            flexDirection="column"
            width={width}
            sx={{ backgroundColor: theme.colors.gray[750] }}
            borderRadius="12px"
            padding="15px"
        >
            {label && (
                <Typography color={theme.colors.gray[500]} fontSize="12px" marginBottom="8px">
                    {label}
                </Typography>
            )}

            <Box display="flex" alignItems="center" justifyContent="space-between">
                <StyledSelectInput
                    value={value}
                    onChange={onChange}
                    inputWidth={inputWidth}
                    IconComponent={KeyboardArrowDownIcon}
                    renderValue={renderValue}
                    displayEmpty
                >
                    {options.map((opt) => (
                        <MenuItem key={opt.value} value={opt.value}>
                            {opt.label}
                        </MenuItem>
                    ))}
                </StyledSelectInput>
            </Box>
        </Box>
    );
};

export default Select;