import React, { useState, useEffect } from 'react';
import { Type } from 'lucide-react';

export const FontSizeController: React.FC = () => {
  const [scale, setScale] = useState<number>(() => {
    return Number(localStorage.getItem('app-font-scale')) || 100;
  });

  const applyScale = (newScale: number) => {
    setScale(newScale);
    localStorage.setItem('app-font-scale', String(newScale));
    document.documentElement.setAttribute('data-font-size', String(newScale));
  };

  useEffect(() => {
    applyScale(scale);
  }, []);

  return (
    <div className="flex flex-wrap items-center gap-2 p-2.5 rounded-2xl bg-muted/40 border border-border/80 shadow-xs max-w-full">
      <div className="flex items-center gap-1.5 shrink-0">
        <Type size={16} className="text-text-muted ml-1" />
        <span className="text-[0.65rem] font-black uppercase tracking-wider text-text-muted">Font Size:</span>
      </div>
      <div className="flex flex-wrap items-center gap-1">
        {[100, 125, 150, 175, 200].map((level) => (
          <button
            key={level}
            type="button"
            onClick={() => applyScale(level)}
            title={`Set font scale to ${level}%`}
            className={`px-2.5 py-1 rounded-xl text-xs font-black transition-all ${
              scale === level
                ? 'bg-primary text-white shadow-xs'
                : 'bg-card hover:bg-muted text-text-muted hover:text-text border border-border/60'
            }`}
          >
            {level}%
          </button>
        ))}
      </div>
    </div>
  );
};

export default FontSizeController;
