import {
  Meta,
  Canvas,
  Props,
  Story,
  SourceState,
} from "@storybook/blocks";
import {
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
  EnumTable,
} from "../../storybook-components";
import { Text, STATUS_VARIANT } from "../..";
import { ArrowLink } from "./ArrowLink";

<Meta
  title="Deprecated/Components/Move to app/Arrow Link"
  component={ArrowLink}
/>

<ComponentHeading
  componentName="ArrowLink"
  description="Link component with an arrow icon"
  sourcePath="src/components/ArrowLink/ArrowLink.tsx"
/>

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

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

<Canvas>
  <Story name="ArrowLink">
    <ArrowLink>This is the ArrowLink component.</ArrowLink>
  </Story>
</Canvas>

## Props

<Props of={ArrowLink} />

<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Disabled

<Canvas withSource={SourceState.OPEN}>
  <Story name="Disabled">
    <ArrowLink disabled>Arrow Link</ArrowLink>
  </Story>
</Canvas>

### Inline

<Canvas withSource={SourceState.OPEN}>
  <Story name="Inline">
    <Text>
      Duis vulputate dui quis commodo cursus. In{" "}
      <ArrowLink>Arrow Link</ArrowLink>
      fermentum efficitur vehicula. Integer nec felis varius, ultrices erat ac, volutpat
      lectus. Proin eu sed magna accumsan blandit a ac nisl. Nulla eros ante
    </Text>
  </Story>
</Canvas>

### Full-width

<Canvas withSource={SourceState.OPEN}>
  <Story name="Full-width">
    <ArrowLink block>Arrow Link</ArrowLink>
  </Story>
</Canvas>