import React, { ElementRef, forwardRef } from "react"
import { tv } from "tailwind-variants"
import { classNames } from "../../utils/classNames"
import { Button, ButtonProps } from "../Button"

export type ToggleButtonProps = Omit<ButtonProps, "variant" | "href"> & {
  checked?: boolean
}

const toggleButtonVariants = tv({
  base: "hover:bg-bg-additional-1",
  variants: {
    checked: {
      // Override existing button borders
      true: "bg-bg-additional-1 !border-text-primary",
    },
  },
})

export const ToggleButton = forwardRef<
  ElementRef<typeof Button>,
  ToggleButtonProps
>(function ToggleButton({ className, checked, ...rest }, ref) {
  return (
    <Button
      aria-checked={checked}
      className={classNames(toggleButtonVariants({ checked }), className)}
      ref={ref}
      role="checkbox"
      variant="secondary"
      {...rest}
    />
  )
})