// FontSizeSetting.tsx
import React from 'react';

interface FontSizeSettingProps {
  fontSize: string; // The current font size
  setFontSize: (newSize: string) => void; // Function to update the font size
}

const FontSizeSetting: React.FC<FontSizeSettingProps> = ({ fontSize, setFontSize }) => {
  const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newSize = `${e.target.value}px`;
    setFontSize(newSize);
    document.documentElement.style.setProperty('--font-size', newSize);
  };

  return (
    <div className="settings-option">
      <p>Font Size</p>
      <input
        type="range"
        min="12"
        max="30"
        value={parseInt(fontSize, 10)} // Ensure value is a number
        onChange={handleFontSizeChange}
      />
      <span>{fontSize}</span>
    </div>
  );
};

export default FontSizeSetting;