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

const IconButtonStyled = styled(MuiIconButton)<{
  circle: string;
  color: ColorVariant;
  variant: ButtonVariant;
  cursor: string;
}>(({ theme, circle, color, variant, cursor }) => {
  const colorMap: Record<ColorVariant, string> = {
    inherit: theme.palette.text.primary,
    primary: theme.palette.primary.main,
    secondary: theme.palette.secondary.main,
    error: theme.palette.error.main,
    warning: theme.palette.warning.main,
    info: theme.palette.info.main,
    success: theme.palette.success.main,
  };

  return {
    borderRadius: circle === 'true' ? 99 : 5,
    border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
    backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
    cursor: cursor,

    '&:hover': {
      backgroundColor:
        variant === 'contained'
          ? theme.palette.action.hover
          : variant === 'outlined'
          ? theme.palette.action.hover
          : 'none',
    },
  };
});

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