"use client";
import { KnobBase } from "./KnobBase";
import { React } from "react";

export function KnobPercentage({ theme, label, axis }) {
  KnobPercentage.propTypes = {
    theme: KnobPercentage.string,
    label: KnobPercentage.string,
    axis: KnobPercentage.string,
  };
  return (
    <KnobBase
      valueDefault={valueDefault}
      valueMin={valueMin}
      valueMax={valueMax}
      stepFn={stepFn}
      stepLargerFn={stepLargerFn}
      valueRawRoundFn={valueRawRoundFn}
      valueRawDisplayFn={valueRawDisplayFn}
      theme={theme}
      label={label}
      axis={axis}
    />
  );
}

const valueMin = 0;
const valueMax = 100;
const valueDefault = 50;
const stepFn = (valueRaw) => 1;
const stepLargerFn = (valueRaw) => 10;
const valueRawRoundFn = Math.round;
const valueRawDisplayFn = (valueRaw) => `${valueRawRoundFn(valueRaw)}%`;
