const baseStyle = {}

const defaultProps = {
  size: 'lg',
  variant: 'outlined',
}

const parts = ['container', 'button', 'content', 'group', 'option', 'label']

const sizes = {
  sm: {
    button: {
      size: 'sm',
    },
    group: {
      size: 'sm',
    },
    option: {
      size: 'sm',
    },
    label: {
      fontSize: 'sm',
    },
  },
  md: {
    button: {
      size: 'md',
    },
    group: {
      size: 'md',
    },
    option: {
      size: 'md',
    },
    label: {
      fontSize: 'md',
    },
  },
  lg: {
    button: {
      size: 'lg',
    },
    group: {
      size: 'lg',
    },
    option: {
      size: 'lg',
    },
    label: {
      fontSize: 'md',
    },
  },
  xl: {
    button: {
      size: 'xl',
    },
    group: {
      size: 'xl',
    },
    option: {
      size: 'xl',
    },
    label: {
      fontSize: 'lg',
    },
  },
}

const variants = {
  outlined: {
    button: {
      hoverBg: 'white',
      activeBg: 'white',
      borderColor: 'sandstone.60',
      hoverBorderColor: 'sandstone.60',
    },
  },
  text: {
    button: {
      hoverBg: 'white',
      activeBg: 'white',
      borderColor: 'transparent',
      hoverBorderColor: 'transparent',
    },
  },
}

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