"use client";

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

export default function TextSizeSlider() {
  const [fontSize, setFontSize] = useState(16);
  const [isRtl, setIsRtl] = useState(false);
  const minSize = 14;
  const maxSize = 24;

  useEffect(() => {
    setIsRtl(document.documentElement.dir === "rtl");
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newSize = parseInt(e.target.value, 10);
    setFontSize(newSize);

    document.documentElement.style.setProperty(
      "--article-font-size",
      `${newSize}px`
    );
  };

  const percent = ((fontSize - minSize) / (maxSize - minSize)) * 100;

  const gradientDirection = isRtl ? "to left" : "to right";

  return (
    <div className="flex items-center gap-4 w-full sm:w-auto">
      <span className="text-[#202020] font-normal text-[16px]">
        {fontSize}
      </span>
      <div className="relative w-[180px] sm:w-[218px] h-6 flex items-center">
        <input
          type="range"
          min={minSize}
          max={maxSize}
          value={fontSize}
          onChange={handleChange}
          className="w-full h-1 bg-[#b9d4ea] rounded-full appearance-none cursor-pointer slider-thumb:appearance-none slider-thumb:w-4 slider-thumb:h-4 slider-thumb:rounded-full slider-thumb:bg-[#1c75bc] slider-thumb:border-4 slider-thumb:border-[#e8f1f8] slider-thumb:shadow-[0px_6px_4px_0px_rgba(98,98,98,0.1)] slider-thumb:cursor-pointer"
          style={{
            background: `linear-gradient(${gradientDirection}, #1c75bc 0%, #1c75bc ${percent}%, #b9d4ea ${percent}%, #b9d4ea 100%)`,
          }}
        />
      </div>
      <Type className="size-6 text-[#646464]" />
    </div>
  );
}