import { Story, Canvas, ArgsTable, Meta, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Chip } from "./Chip";

<Meta title="Components/Data/Chip" component={Chip} />

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

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Chip">
    <Chip className="uppercase">Chip</Chip>
  </Story>
</Canvas>

## API

<ArgsTable of={Chip} />

## Demos

### Long text, multiple lines

<Canvas>
  <Story name="Chip Multiple Lines">
    <Chip>
      Similique dolor aperiam magni laboriosam. Et et recusandae dicta. Minus
      dolorum ducimus numquam et illum iusto neque. Eveniet porro quo itaque
      aliquid nulla eveniet. Libero inventore similique laudantium veritatis
      repellat modi eaque. Corporis veniam temporibus in.
    </Chip>
  </Story>
</Canvas>

### Integration Chip

Currently, only Front, Jira, Salesforce, ServiceNow, Slack, and Zendesk are supported.

<Canvas>
  <Story name="Chip Integration">
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Chip.Integration className="uppercase" integration="front">
        Front
      </Chip.Integration>

      <Chip.Integration className="uppercase" integration="jira">
        Jira
      </Chip.Integration>

      <Chip.Integration className="uppercase" integration="salesforce">
        Salesforce
      </Chip.Integration>

      <Chip.Integration className="uppercase" integration="service_now">
        ServiceNow
      </Chip.Integration>

      <Chip.Integration className="uppercase" integration="slack">
        Slack
      </Chip.Integration>

      <Chip.Integration className="uppercase" integration="zendesk">
        Zendesk
      </Chip.Integration>
    </div>
  </Story>
</Canvas>