import { BUTTON_VARIANTS, BUTTON_SIZES } from './tokens'

export default function Button({
  variant = 'secondary',
  size = 'md',
  children,
  className = '',
  ...props
}) {
  const base = BUTTON_VARIANTS[variant] ?? BUTTON_VARIANTS.secondary
  const sizeOverride = BUTTON_SIZES[size]

  // Replace the size-specific px/py/text classes from the base with the size override
  const cls = size === 'sm'
    ? base.replace('px-3.5 py-2 text-[13px]', sizeOverride)
    : base

  return (
    <button className={`${cls} ${className}`} {...props}>
      {children}
    </button>
  )
}
