import { cva } from 'class-variance-authority'

import { deepmerge } from 'deepmerge-ts'
import styles from './chip-button.module.css'

export const config = {
  variants: {
    variant: {
      Default: styles.Default,
      Outlined: styles.Outlined,
    },
  },
  defaultVariants: {
    variant: 'Default',
  },
} as const

export const variants = cva(styles.chip, config)

const chipConfig = {
  variants: {
    typography: config.variants.variant,
  },
  defaultVariants: config.defaultVariants,
} as const

export function withChipButton<T>(config: T) {
  return deepmerge(chipConfig, config)
}