'use client'

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const chipVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full, text-txt-primary-normal cursor-pointer',
  {
    variants: {
      state: {
        inactive:
          'bg-surface-element-normal hover:bg-surface-element-hover visited:bg-surface-element-press',
        active:
          'border border-solid border-primary-variant-normal bg-primary-normal hover:bg-primary-hover hover:border-primary-variant-hover visited:border-surface-element-normal visited:bg-primary-press',
      },
      size: {
        large: 'h-12 rounded-full px-4 txt-label-l',
        small: 'h-8 rounded-full px-3 txt-label-m',
      },
      block: {
        true: 'w-full',
        false: '',
      },
      disabled: {
        true: 'bg-surface-element-disabled text-txt-primary-disabled pointer-events-none',
        false: '',
      },
    },
    defaultVariants: {
      state: 'inactive',
      disabled: false,
      size: 'small',
      block: false,
    },
  }
)

export interface ChipProps
  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chipVariants> {
  children?: React.ReactNode
}

const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
  ({ className, state, size, block, disabled, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(chipVariants({ state, disabled, size, block }), className)}
        {...props}
      >
        {children}
      </div>
    )
  }
)

Chip.displayName = 'Chip'

export { Chip, chipVariants }
