import { transparentize } from 'polished';
import { Styles } from '../../styles/types';
import { Props, defaultProps } from './IconButton';

export const getVariant: Styles<Props> = ({
  theme,
  variant = defaultProps.variant,
}) => {
  return {
    primary: {
      backgroundColor: 'white',
      color: theme.colors.primary,
      boxShadow: theme.shadows[2],
      width: theme.space.xl,
      height: theme.space.xl,
      borderRadius: '100%',
      '&:hover': {
        backgroundColor: theme.colors.brandDark,
        color: 'white',
        boxShadow: theme.shadows[3],
      },
      '&:active': {
        backgroundColor: transparentize(0.2, theme.colors.brandDark),
        boxShadow: theme.shadows[3],
      },
    },
    raw: {},
  }[variant];
};
