import { Slider } from "@/components/ui/slider";
import { useSetting } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import SettingRow from "./SettingRow";

/**
 * Slider with its value ("14 px", "Pill"), bound to a dot path.
 */
const RangeSetting = ({
  path,
  title,
  description,
  min,
  max,
  format = (value) => `${value} px`,
  pro = false,
  source = "settings",
}) => {
  const [value, setValue] = useSetting(path, min, source);
  const locked = pro && !IS_PRO;

  return (
    <SettingRow
      title={title}
      description={description}
      pro={pro}
      locked={locked}
    >
      <div className="ino:flex ino:w-56 ino:items-center ino:gap-3">
        <Slider
          aria-label={title}
          min={min}
          max={max}
          value={[Number(value)]}
          disabled={locked}
          onValueChange={(next) =>
            setValue(Array.isArray(next) ? next[0] : next)
          }
        />
        <span className="ino:w-12 ino:shrink-0 ino:text-right ino:font-mono ino:text-xs ino:text-muted-foreground">
          {format(Number(value))}
        </span>
      </div>
    </SettingRow>
  );
};

export default RangeSetting;