"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>
  )
}