import { useState } from 'react'
import { faTimesCircle, faStopCircle } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'
import Br from '../Br'
import Div from '../Div'
import Row from '../Row'
import Tag from '../Tag'
import './index.mdx.styl'

# Tag

Inherits [Div props](/docs/components/Div).

Tags are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, tags should appear dynamically as a group of multiple interactive elements.

```jsx
import { Tag } from '@startupjs/ui'
```

## Simple example

```jsx example
return (
  <Row>
    <Tag>Tag</Tag>
  </Row>
)
```

## Colors

Color is `primary` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.

```jsx example
return (
  <Row>
    <Tag>Primary (default)</Tag>
    <Tag color='success' pushed='s'>Success</Tag>
    <Tag color='warning' pushed='s'>Warning</Tag>
    <Tag color='error' pushed='s'>Error</Tag>
  </Row>
)
```

## Sizes

The `size` property applies to the size of tag, icons, and text. There are two sizes - `m` and` s` (default is `m`).

```jsx example
return (
  <Div style={{ alignItems: 'flex-start' }}>
    <Tag size='s'>Size 's'</Tag>
    <Br />
    <Tag>Size 'm' (default)</Tag>
  </Div>
)
```

## Outlined tags

Outlined tags offer an alternative style, in property `variant` need to pass `outlined` or `outlined-bg` for an outlined tag with a background.

```jsx example
return (
  <Row>
    <Tag variant='outlined'>Outlined tag</Tag>
    <Tag variant='outlined-bg' pushed='s' onPress={() => {}}>Outlined tag with a background</Tag>
  </Row>
)
```

## Shapes

Tags can have different corner shapes. It can be changed by changing `shape` prop (`circle` by default) to `rounded`.

```jsx example
return (
  <Row>
    <Tag>Circle shape</Tag>
    <Tag shape='rounded' pushed='s'>Rounded shape</Tag>
  </Row>
)
```

## Icons

Left and right icons can be added using the `icon` and `secondaryIcon` properties. To change the color of an icon, use the corresponding `iconStyleName` or `secondaryIconStyleName` property.

In `.styl` file
```stylus
.icon
  color $UI.colors.dark
.secondaryIcon
  color $UI.colors.error
```

```jsx example
return (
  <Row>
    <Tag icon={faStopCircle}>
      Icon on the left
    </Tag>
    <Tag
      secondaryIcon={faStopCircle}
      variant='outlined-bg'
      pushed='s'
    >
      Icon on the right
    </Tag>
    <Tag
      iconStyleName='icon'
      secondaryIconStyleName='secondaryIcon'
      variant='outlined'
      icon={faStopCircle}
      secondaryIcon={faTimesCircle}
      pushed='s'
    >
      Two icons
    </Tag>
  </Row>
)
```

## Actions
Tag can be made interactive using `onPress` prop.

```jsx example
const [counter, setCounter] = useState(0)
return (
  <Tag onPress={() => setCounter(counter + 1)}>
    Clicked {counter} times
  </Tag>
)
```

## Sandbox

<Sandbox
  Component={Tag}
  extraParams={{
    icon: { showIconSelect: true },
    secondaryIcon: { showIconSelect: true }
  }}
  props={{
    children: 'Hello world!',
    onPress: () => alert('"onPress" event on Tag component'),
    onLongPress: () => alert('"onLongPress" event on Tag component'),
  }}
/>