interface BarProps {
  value: number;
  max: number;
  type: 'hp' | 'end' | 'xp';
  label?: string;
  showValues?: boolean;
}

export function Bar({ value, max, type, label, showValues = true }: BarProps) {
  const pct = Math.min(100, Math.round((value / Math.max(max, 1)) * 100));
  return (
    <div>
      {(label || showValues) && (
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, fontSize: 12, color: '#6b7a99' }}>
          {label && <span>{label}</span>}
          {showValues && <span>{value} / {max}</span>}
        </div>
      )}
      <div className="bar-track">
        <div className={`bar-fill-${type}`} style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}
