'use client';

import { useUserPreferences } from '@/contexts/UserPreferencesContext';

export function FontSizeToggle() {
  const { preferences, toggleFontSize } = useUserPreferences();
  
  // Icône pour la taille de police
  const getFontSizeIcon = () => {
    switch (preferences.viewPreferences.fontSize) {
      case 'small':
        return 'A';
      case 'large':
        return 'A';
      default:
        return 'A';
    }
  };
  
  const getFontSizeScale = () => {
    switch (preferences.viewPreferences.fontSize) {
      case 'small':
        return 'text-xs';
      case 'large':
        return 'text-lg';
      default:
        return 'text-sm';
    }
  };

  return (
    <button
      onClick={toggleFontSize}
      className="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50 hover:text-[var(--primary)]"
      title={`Font size: ${preferences.viewPreferences.fontSize} (click to cycle)`}
    >
      <span className={`font-mono font-bold ${getFontSizeScale()}`}>
        {getFontSizeIcon()}
      </span>
    </button>
  );
}