'use client'

import { variants } from './variants'

import { cx, type VariantProps } from 'class-variance-authority'
import type { HTMLAttributes } from 'react'

interface FakeButtonProps
  extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'>,
    VariantProps<typeof variants> {
  isDisabled?: boolean
}

export function FakeButton({
  variant,
  color,
  size,
  typography,
  children,
  className,
  isHovered,
  isDisabled,
  ...props
}: FakeButtonProps) {
  const classNames = variants({
    color,
    size,
    variant,
    typography,
    isHovered,
    className,
  })

  return (
    <span
      className={cx(classNames)}
      data-disabled={isDisabled || undefined}
      {...props}
    >
      {children}
    </span>
  )
}
