import styled from 'styled-components';
import CircularProgress from '@material-ui/core/CircularProgress';

import { ThemeObject } from '../Theme';

const getColor = (theme: ThemeObject, color?: keyof ThemeObject['pallet'], customColor?: string) => {
  if (color) return theme.pallet[color];
  if (customColor) return customColor;
  return theme.pallet.primaryColor;
};

export const StyledCircularProgress = styled(CircularProgress).attrs(
  (props: { $theme: ThemeObject; $color?: keyof ThemeObject['pallet']; $customColor?: string }) => ({
    $theme: props.$theme,
    $color: props.$color,
    $customColor: props.$customColor,
  })
)`
  &&.MuiCircularProgress-colorPrimary {
    color: ${(props) => getColor(props.$theme, props.$color, props.$customColor)};
  }
`;
