client/src/components/UI/Button.jsx

import { forwardRef } from 'react'
import clsx from 'clsx'

const variants = {
  primary:
    'border border-transparent bg-accent text-accent-foreground hover:bg-accent/90 active:scale-[0.99]',
  secondary:
    'border border-border bg-card text-foreground hover:bg-secondary',
  ghost:
    'border border-transparent bg-transparent text-muted-foreground hover:bg-secondary/75 hover:text-foreground',
  danger: 'border border-danger/25 bg-danger/10 text-danger hover:bg-danger/20',
}

const sizes = {
  sm: 'h-9 px-3 text-sm',
  md: 'h-11 px-4 text-sm',
  lg: 'h-12 px-5 text-sm',
  icon: 'h-11 w-11',
}

const Button = forwardRef(function Button(
  {
    className,
    variant = 'secondary',
    size = 'md',
    children,
    loading = false,
        disabled,
        ...props
  },
  ref,
) {
  return (
    <button
      ref={ref}
      className={clsx(
        'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
        variants[variant],
        sizes[size],
        className,
      )}
      disabled={disabled || loading}
      {...props}
    >
      {children}
    </button>
  )
})

export default Button