const baseStyle = {
  container: {
    padding: 1,
  },
}

const defaultProps = {
  size: 'xxxl',
  variant: 'light',
}

const parts = ['container', 'circle', 'text']

const sizes = {
  xs: {
    circle: {
      borderWidth: 2,
      h: 20,
      w: 20,
    },
  },
  sm: {
    circle: {
      borderWidth: 2,
      h: 24,
      w: 24,
    },
  },
  md: {
    circle: {
      borderWidth: 3,
      h: 32,
      w: 32,
    },
  },
  lg: {
    circle: {
      borderWidth: 3,
      h: 40,
      w: 40,
    },
  },
  xl: {
    circle: {
      borderWidth: 3,
      h: 48,
      w: 48,
    },
  },
  xxl: {
    circle: {
      borderWidth: 4,
      h: 60,
      w: 60,
    },
  },
  xxxl: {
    circle: {
      borderWidth: 5,
      h: 80,
      w: 80,
    },
  },
  xxxxl: {
    circle: {
      borderWidth: 5,
      h: 120,
      w: 120,
    },
  },
}

const variants = {
  light: {
    circle: {
      borderColor: 'seaBlue.80',
      borderTopColor: 'seaBlue.main',
    },
    text: {
      color: 'seaBlue.main',
    },
  },
  dark: {
    container: {
      bg: 'darkBlue.main',
    },
    circle: {
      borderColor: 'hsl(139, 100%, 78%, 0.4)',
      borderTopColor: 'digiGreen.main',
    },
    text: {
      color: 'digiGreen.main',
    },
  },
}

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