import React, { useState } from "react";
import { action } from "storybook/actions";
import { InputSearch } from "@jobber/components-native";
import type { InputSearchProps } from "@jobber/components-native";

type InputSearchStoryArgs = Pick<InputSearchProps, "placeholder" | "prefix">;

export function InputSearchBasic(props: Partial<InputSearchStoryArgs>) {
  const [value, setValue] = useState("");

  return (
    <InputSearch
      placeholder={props.placeholder}
      prefix={props.prefix}
      value={value}
      onChange={newValue => setValue(newValue)}
      onDebouncedChange={() => action("alert")(value)}
    />
  );
}