veza/apps/web/src/components/ui/FAB.tsx

import { cn } from '@/lib/utils';
import { Button, ButtonProps } from './button';

export interface FABProps extends Omit<ButtonProps, 'size' | 'variant'> {
  /**
   * Position of the FAB on the screen
   * @default 'bottom-right'
   */
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  
  /**
   * Size of the FAB
   * @default 'lg'
   */
  size?: 'sm' | 'md' | 'lg';
  
  /**
   * Whether to show a label next to the FAB
   * @default false
   */
  showLabel?: boolean;
  
  /**
   * Label text (only shown if showLabel is true)
   */
  label?: string;
  
  /**
   * Additional CSS classes for the container
   */
  containerClassName?: string;
}

const positionClasses = {
  'bottom-right': 'bottom-6 right-6',
  'bottom-left': 'bottom-6 left-6',
  'top-right': 'top-6 right-6',
  'top-left': 'top-6 left-6',
};

const sizeClasses = {
  sm: 'h-12 w-12 text-base',
  md: 'h-14 w-14 text-lg',
  lg: 'h-16 w-16 text-xl',
};

/**
 * FAB (Floating Action Button) - Floating action button component
 * 
 * A prominent floating button that appears fixed on the screen, typically
 * used for primary actions like upload, create, or add.
 * 
 * @example
 * ```tsx
 * <FAB onClick={() => handleUpload()}>
 *   <Plus className="w-6 h-6" />
 * </FAB>
 * ```
 * 
 * @example
 * ```tsx
 * <FAB
 *   position="bottom-right"
 *   size="lg"
 *   showLabel
 *   label="Upload Track"
 *   onClick={() => navigate('/upload')}
 * >
 *   <Upload className="w-6 h-6" />
 * </FAB>
 * ```
 */
export function FAB({
  position = 'bottom-right',
  size = 'lg',
  showLabel = false,
  label,
  className,
  containerClassName,
  children,
  ...buttonProps
}: FABProps) {
  return (
    <div
      className={cn(
        'fixed z-50 flex items-center gap-4',
        positionClasses[position],
        containerClassName,
      )}
    >
      {showLabel && label && (
        <span className="text-sm font-semibold text-foreground bg-card/90 backdrop-blur-md px-4 py-2 rounded-lg border border-white/10 shadow-lg whitespace-nowrap">
          {label}
        </span>
      )}
      <Button
        variant="default"
        aria-label={label || 'Action'}
        className={cn(
          'rounded-full aspect-square p-0',
          'shadow-fab-glow shadow-fab-glow-hover',
          'transition-all duration-[var(--sumi-duration-normal)]',
          'active:opacity-80',
          sizeClasses[size],
          className,
        )}
        {...buttonProps}
      >
        {children}
      </Button>
    </div>
  );
}