const baseStyle = {}

const defaultProps = {
  size: 'md',
  variant: 'active',
}

const sizes = {
  sm: {},
  md: {},
}

const variants = {
  active: {
    button: {
      bg: 'seaBlue.main',
    },
    icon: {
      bg: 'white',
      color: 'seaBlue.main',
    },
  },
  completed: {
    button: {
      bg: 'landGreen.41',
    },
    icon: {
      bg: 'white',
      color: 'landGreen.41',
    },
  },
  optional: {
    button: {
      bg: 'white',
      borderColor: 'seaBlue.45',
      color: 'seaBlue.45',
    },
    icon: {
      bg: 'white',
      color: 'seaBlue.45',
    },
  },
  pending: {
    button: {
      bg: 'sandstone.90',
      color: 'sandstone.45',
    },
    icon: {
      bg: 'white',
      color: 'sandstone.45',
    },
  },
  error: {
    button: {
      bg: 'energyRed.45',
      color: 'white',
    },
    icon: {
      bg: 'white',
      color: 'energyRed.45',
    },
  },
}

export default {
  baseStyle,
  defaultProps,
  sizes,
  variants,
}
