import React from 'react';
import { IconButton as MuiIconButton } from '@mui/material';
import { IconButtonBaseProps } from '../interfaces';
import { palette } from '../helpers';
import { styled } from '@mui/material/styles';
import { ButtonVariant, ColorVariant } from '@/types';

const colorMap: Record<ColorVariant, string> = {
  inherit: palette.inherit,
  primary: palette.primary,
  secondary: palette.secondary,
  error: palette.error,
  warning: palette.warning,
  info: palette.info,
  success: palette.success,
};

const IconButtonStyled = styled(MuiIconButton)<{
  circle: string;
  color: ColorVariant;
  variant: ButtonVariant;
  cursor: string;
}>(({ circle, color, variant, cursor }) => ({
  borderRadius: circle === 'true' ? 99 : 5,
  border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
  backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
  cursor: cursor,
}));

export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
  
  return (
    <IconButtonStyled circle={`${circle}`} color="primary" variant="text" cursor="default" {...props}>
      {children}
    </IconButtonStyled>
  );
};