import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';

export { default as Badge } from './Badge.vue';

export const badgeVariants = cva(
  'inline-flex w-fit shrink-0 select-none items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border font-[var(--font-font-weight-regular,400)] [font-family:var(--font-font-family-body,Saans)] [font-style:normal] transition-[color,box-shadow,opacity] [&>svg]:size-3 [&>svg]:pointer-events-none focus-visible:border-border-surface-focus-ring focus-visible:ring-[3px] focus-visible:ring-border-surface-focus-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:aria-invalid:ring-destructive/40',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-background-button-primary-button text-content-on-button-primary-button',
        secondary:
          'border-transparent bg-background-button-secondary-button text-content-on-button-secondary-button',
        outline:
          'border-border-surface-default bg-background-surface-primary text-content-on-surface-primary',
        destructive:
          'border-transparent bg-background-button-danger-button text-content-on-button-danger-button',
        success:
          'border-transparent bg-background-status-success text-content-on-status-success',
        warning:
          'border-transparent bg-background-status-warning text-content-on-status-warning',
        verified:
          'border-transparent bg-background-accent-default text-content-on-accent-default',
      },
      size: {
        default: 'px-2.5 py-2 label-14-regular',
        small: 'px-2 py-1 label-12-regular',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
);
export type BadgeVariants = VariantProps<typeof badgeVariants>;
