import { cn } from "@/lib/utils";
import { Slider } from "@/components/ui/slider";
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
import { MAX_FONT_SIZE, MIN_FONT_SIZE } from "@/constants/editor/options";

export default function FontSizeSlider() {
  const skipInterval = 2;
  const ticks = [...Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)].map(
    (_, i) => i + MIN_FONT_SIZE
  );
  const { fontSize, setFontSize } = useCodeEditorStore();

  const handleSliderChange = (value: number[]) => {
    setFontSize(value[0]);
  };

  return (
    <div className="w-48 h-8">
      <Slider
        value={[fontSize]}
        min={MIN_FONT_SIZE}
        max={MAX_FONT_SIZE}
        onValueChange={handleSliderChange}
        aria-label="Slider with ticks"
      />
      <span
        className="mt-3 flex w-full items-center justify-between gap-1 px-2.5 text-xs font-medium text-muted-foreground"
        aria-hidden="true"
      >
        {ticks.map((tick, i) => (
          <span
            key={i}
            className="flex w-0 flex-col items-center justify-center gap-2"
          >
            <span
              className={cn(
                "h-1 w-px bg-muted-foreground/70",
                i % skipInterval !== 0 && "h-0.5"
              )}
            />
            <span className={cn(i % skipInterval !== 0 && "opacity-0")}>
              {tick}
            </span>
          </span>
        ))}
      </span>
    </div>
  );
}
