import { useSetting } from "@/hooks/useSettings";
import { IS_PRO } from "@/lib/env";
import Segmented from "./Segmented";
import SettingRow from "./SettingRow";

/**
 * Pick-one setting (segmented control) bound to a dot path in
 * `pcfw_settings` (or `pcfw_design` with `source="design"`).
 */
const ChoiceSetting = ({
  path,
  title,
  description,
  options,
  pro = false,
  source = "settings",
}) => {
  const [value, setValue] = useSetting(path, undefined, source);
  const locked = pro && !IS_PRO;

  return (
    <SettingRow
      title={title}
      description={description}
      pro={pro}
      locked={locked}
    >
      <Segmented
        label={title}
        value={value}
        options={options}
        disabled={locked}
        onChange={setValue}
      />
    </SettingRow>
  );
};

export default ChoiceSetting;