import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const knopfStile = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
  {
    variants: {
      art: {
        betont: 'bg-betont text-betont-vordergrund hover:bg-betont/90',
        umriss: 'border border-rand bg-karte hover:bg-gedaempft',
        leise: 'hover:bg-gedaempft',
        gefahr: 'bg-gefahr text-gefahr-vordergrund hover:bg-gefahr/90',
        verweis: 'text-betont underline-offset-4 hover:underline',
      },
      groesse: {
        normal: 'h-9 px-4 py-2',
        klein: 'h-8 rounded-md px-3 text-xs',
        gross: 'h-11 rounded-md px-6',
        quadrat: 'size-9',
      },
    },
    defaultVariants: {
      art: 'betont',
      groesse: 'normal',
    },
  },
)

export type KnopfEigenschaften = React.ComponentProps<'button'> &
  VariantProps<typeof knopfStile> & {
    /** Rendert stattdessen das Kindelement, z. B. einen Link. */
    alsKind?: boolean
  }

function Button({
  className,
  art,
  groesse,
  alsKind = false,
  ...rest
}: KnopfEigenschaften) {
  const Element = alsKind ? Slot : 'button'
  return <Element className={cn(knopfStile({ art, groesse }), className)} {...rest} />
}

export { Button, knopfStile }