import React, { ComponentProps, forwardRef } from 'react';
import { Select as MuiSelect } from '@mui/material';

import { SHAPE_CIRCULAR, SHAPE_SQUARE } from '@/mui/constants';

import type { ShapeProp } from '@/mui/types';

type Props = ComponentProps<typeof MuiSelect> & {
  shape?: ShapeProp;
};

const Select = forwardRef<HTMLDivElement, Props>(({ shape, sx, ...rest }, ref) => (
  <MuiSelect
    ref={ref}
    {...rest}
    sx={{
      ...(shape === SHAPE_SQUARE && {
        borderRadius: 0,
      }),
      ...(shape === SHAPE_CIRCULAR && {
        borderRadius: (theme) => theme.shape.borderRadiusCircular,
      }),
      ...sx,
    }}
  />
));

Select.displayName = 'Select';

export default Select;
