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

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

export const config = {
  variants: {
    variant: {
      Primary: styles["variant-primary"],
      Secondary: styles["variant-secondary"],
      Tertiary: styles["variant-tertiary"],
      Text: styles["variant-text"],
    },
    color: {
      Primary: styles["color-primary"],
      Inverted: styles["color-inverted"],
    },
    size: {
      sm: styles["size-sm"],
      md: styles["size-md"],
      lg: styles["size-lg"],
    },
    wrapping: {
      true: undefined,
      false: styles["no-wrapping"],
    },
    fullWidth: {
      true: styles["full-width"],
      false: undefined,
    },
  },
  defaultVariants: {
    variant: "Primary",
    color: "Primary",
    size: "lg",
    wrapping: true,
  },
} as const

const buttonConfig = {
  variants: {
    ...config.variants,
  },
  defaultVariants: {
    ...config.defaultVariants,
  },
} as const

export const variants = cva(styles.button, buttonConfig)

export function withButton<T>(config: T) {
  return deepmerge(buttonConfig, config)
}