import { Select, SelectProps } from '@mui/material';
import React, { ForwardedRef, forwardRef } from 'react';

type Props = {
    mainBorderColor?: string;
} & SelectProps;

const BaseSelect = ({ mainBorderColor = '#3489E4', ...props }: Props, ref: ForwardedRef<HTMLSelectElement>) => {
    return (
        <Select
            variant='outlined'
            inputRef={ref}
            {...props}
            sx={{
                '.MuiSelect-select': {
                    padding: '8px',
                    gap: '8px',
                },
                fieldset: {
                    borderRadius: '8px',
                    border: `2px solid ${mainBorderColor}`,

                    fontSize: '16px',
                    fontWeight: 400,
                    lineHeight: '20px',
                    color: '#000',
                },

                '&:hover': {
                    fieldset: {
                        border: `2px solid ${mainBorderColor} !important`,
                    },
                },

                '.Mui-focused': {
                    fieldset: {
                        borderRadius: '8px',
                        // border: `2px solid ${mainBorderColor}`,
                        border: `2px solid #3489E4 !important`,

                        fontSize: '16px',
                        fontWeight: 400,
                        lineHeight: '20px',
                        color: '#000',

                        '&:hover': {
                            fieldset: {
                                border: `2px solid #3489E4 !important`,
                            },
                        },
                    },
                },
                ...props.sx,
            }}
        />
    );
};

export default forwardRef(BaseSelect);
