veza/apps/web/src/components/gamification/XPBar.tsx

import React from 'react';

interface XPBarProps {
  currentXP: number;
  nextLevelXP: number;
  level: number;
  size?: 'sm' | 'md' | 'lg';
  showLabels?: boolean;
  className?: string;
}

export const XPBar: React.FC<XPBarProps> = ({
  currentXP,
  nextLevelXP,
  level,
  size = 'md',
  showLabels = true,
  className = '',
}) => {
  const percentage = Math.min(
    100,
    Math.max(0, (currentXP / nextLevelXP) * 100),
  );

  const heightClasses = {
    sm: 'h-2',
    md: 'h-4',
    lg: 'h-6',
  };

  const textClasses = {
    sm: 'text-xs',
    md: 'text-xs',
    lg: 'text-sm',
  };

  return (
    <div className={`w-full ${className}`}>
      {showLabels && (
        <div
          className={`flex justify-between items-end mb-1 font-mono font-bold ${textClasses[size]}`}
        >
          <span className="text-warning">LVL {level}</span>
          <span className="text-muted-foreground">
            <span className="text-foreground">{currentXP}</span> / {nextLevelXP} XP
          </span>
        </div>
      )}

      <div
        className={`w-full bg-muted rounded-full overflow-hidden border border-warning/30 ${heightClasses[size]} relative`}
      >
        {/* Background Pattern */}
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20"></div>

        {/* Progress Fill */}
        <div
          className="h-full bg-gradient-to-r from-sumi-gold/80 to-warning transition-all duration-[var(--duration-slow)] shadow-gold-glow relative"
          style={{ width: `${percentage}%` }}
        >
          {/* Shimmer Effect */}
          <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 translate-x-[-100%] animate-shimmer"></div>
        </div>
      </div>

      {showLabels && size === 'lg' && (
        <div className="text-right text-xs text-muted-foreground mt-1 font-mono">
          {Math.round(nextLevelXP - currentXP)} XP to next level
        </div>
      )}
    </div>
  );
};