import React, { useState } from "react";
import { InputFieldWrapper, Text } from "@jobber/components-native";
import type { InputFieldWrapperProps } from "@jobber/components-native";

type ClearableStoryProps = Pick<InputFieldWrapperProps, "showClearAction">;

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

  function handleClear() {
    setValue("");
  }

  return (
    <InputFieldWrapper
      showClearAction={props.showClearAction}
      onClear={handleClear}
    >
      <Text>{value}</Text>
    </InputFieldWrapper>
  );
}