import { useState } from "react";
import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { STATUS_VARIANT } from "../../types";
import { Box, Button, BUTTON_VARIANT, FormGroup, Input, Label } from "../../";
import { InputFeedback } from "./InputFeedback";

<Meta title="Components/Forms/Input Feedback" component={Image} />

<ComponentHeading
  componentName="InputFeedback"
  description=""
  sourcePath="src/components/InputFeedback/InputFeedback.tsx"
  hideDemosLink
/>

## Installation

```jsx
import { InputFeedback } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="InputFeedback">
    {() => {
      const [showFeedback, setShowFeedback] = useState(true);
      return (
        <Box>
          <Button
            className="mb-4"
            variant={BUTTON_VARIANT.UTILITY}
            onClick={() => setShowFeedback(!showFeedback)}
          >
            Toggle Feedback
          </Button>
          <FormGroup id="name1">
            <Label>Name</Label>
            <Input />
            {showFeedback && (
              <InputFeedback>I see what you did there</InputFeedback>
            )}
          </FormGroup>
          <FormGroup variant={STATUS_VARIANT.SUCCESS} id="name2">
            <Label>Name</Label>
            <Input />
            {showFeedback && (
              <InputFeedback>I see what you did there</InputFeedback>
            )}
          </FormGroup>
          <FormGroup variant={STATUS_VARIANT.WARNING} id="name3">
            <Label>Name</Label>
            <Input />
            {showFeedback && (
              <InputFeedback>I see what you did there</InputFeedback>
            )}
          </FormGroup>
          <FormGroup variant={STATUS_VARIANT.DANGER} id="name4">
            <Label>Name</Label>
            <Input />
            {showFeedback && (
              <InputFeedback>I see what you did there</InputFeedback>
            )}
          </FormGroup>
        </Box>
      );
    }}
  </Story>
</Canvas>

## API

<ArgsTable of={InputFeedback} />