/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/ui/Button.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Import project module (@/ alias = src/ folder in tsconfig)
import { cn } from '@/lib/utils';
// Import React — core UI library (components, hooks, JSX)
import { ButtonHTMLAttributes, forwardRef } from 'react';
// (blank line — separates logical blocks for readability)
// TypeScript interface — contract for object properties and methods
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  // Line 5: variant?: 'primary' | 'secondary' | 'gold' | 'ghost';
  variant?: 'primary' | 'secondary' | 'gold' | 'ghost';
  // Line 6: size?: 'sm' | 'md' | 'lg';
  size?: 'sm' | 'md' | 'lg';
// Closing brace — end of block (function, if, object, JSX)
}
// (blank line — separates logical blocks for readability)
// Line 9: const Button = forwardRef<HTMLButtonElement, ButtonProps>(
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  // Line 10: ({ className, variant = 'primary', size = 'md', children,...
  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
    // Line 11: const variants = {
    const variants = {
      // Property or array item — trailing comma allowed in TypeScript
      primary: 'btn-primary',
      // Property or array item — trailing comma allowed in TypeScript
      secondary: 'btn-secondary',
      // Property or array item — trailing comma allowed in TypeScript
      gold: 'btn-gold',
      // Line 15: ghost:
      ghost:
        // Property or array item — trailing comma allowed in TypeScript
        'inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700',
    // Closing brace — end of block (function, if, object, JSX)
    };
// (blank line — separates logical blocks for readability)
    // Line 19: const sizes = {
    const sizes = {
      // Property or array item — trailing comma allowed in TypeScript
      sm: 'px-4 py-2 text-xs',
      // Property or array item — trailing comma allowed in TypeScript
      md: '',
      // Property or array item — trailing comma allowed in TypeScript
      lg: 'px-8 py-4 text-base',
    // Closing brace — end of block (function, if, object, JSX)
    };
// (blank line — separates logical blocks for readability)
    // Return JSX — describes UI tree React renders to the DOM
    return (
      // JSX element — HTML-like tag becomes React component in browser
      <button
        // Line 27: ref={ref}
        ref={ref}
        // Tailwind CSS utility classes — styling (colors, spacing, layout)
        className={cn(variants[variant], sizes[size], className)}
        // Line 29: {...props}
        {...props}
      // Line 30: >
      >
        // Line 31: {children}
        {children}
      // JSX element — HTML-like tag becomes React component in browser
      </button>
    // Line 33: );
    );
  // Closing brace — end of block (function, if, object, JSX)
  }
// Line 35: );
);
// (blank line — separates logical blocks for readability)
// Line 37: Button.displayName = 'Button';
Button.displayName = 'Button';
// Line 38: export default Button;
export default Button;
