import { Input } from "@/components/ui/input";
import { useSetting } from "@/hooks/useSettings";

/**
 * Labelled text input bound to a dot path. An empty value means "use the
 * default", which shows as the placeholder.
 */
const TextSetting = ({
  path,
  label,
  placeholder,
  source = "settings",
  className = "",
  mono = false,
}) => {
  const [value, setValue] = useSetting(path, "", source);
  const id = `pcfw-${source}-${path.replace(/\./g, "-")}`;

  return (
    <div
      className={`ino:flex ino:min-w-0 ino:flex-col ino:gap-1.5 ${className}`}
    >
      <label
        htmlFor={id}
        className="ino:text-[13px] ino:font-medium ino:text-foreground"
      >
        {label}
      </label>
      <Input
        id={id}
        value={value ?? ""}
        placeholder={placeholder}
        className={mono ? "ino:font-mono ino:text-[13px]" : ""}
        onChange={(event) => setValue(event.target.value)}
      />
    </div>
  );
};

export default TextSetting;