import { TextField, TextFieldProps } from '@mui/material';
import React, { ForwardedRef, forwardRef } from 'react';

type Props = {
    mainBorderColor?: string;
    inputFontSize?: string;
} & TextFieldProps;

const BaseInput = ({ mainBorderColor = '#3489E4', inputFontSize = '16px', ...props }: Props, ref: ForwardedRef<HTMLInputElement>) => {
    return (
        <TextField
            variant='outlined'
            inputRef={ref}
            {...props}
            sx={{
                input: {
                    padding: '8px',
                    gap: '8px',
                    fontSize: inputFontSize,
                },
                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(BaseInput);
