web/packages/design-system/lib/components/FakeButton/index.tsx

'use client'

import { variants } from './variants'

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

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

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

  return (
    <Typography
      variant={
        size === 'sm'
          ? 'Body/Supporting text (caption)/smBold'
          : 'Body/Paragraph/mdBold'
      }
    >
      <span
        className={cx(classNames)}
        data-disabled={isDisabled || undefined}
        {...props}
      >
        {children}
      </span>
    </Typography>
  )
}