import { useState } from 'react'
import Icon from '../Icon'
import Row from '../Row'
import Content from '../Content'
import Br from '../Br'
import TextInput from '../forms/TextInput'
import {
  faHouseUser,
  faTable,
  faShareAlt
} from '@fortawesome/free-solid-svg-icons'
import CustomIconExample from './CustomIconExample.svg'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'

# Icon

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.

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

## Simple example

Component uses `@fortawesome/react-native-fontawesome` library to implement icons.

```jsx
import { faHouseUser } from '@fortawesome/free-solid-svg-icons'
```

```jsx example
return (
  <Icon icon={faHouseUser} />
)
```

## Custom Icon

To use your custom icon you must provide a valid `svg` icon to `icon` property

```jsx
import CustomIconExample from './CustomIconExample.svg'
```

```jsx example
return (
  <Icon
    size={50}
    styleName='icon orange'
    icon={CustomIconExample}
  />
)
```

## Sizes

Size can be modified using the `size` prop. Default value is `m`. Pre defined icon size values are `xs`, `s`, `m`, `l`, `xl`, `xxl`. Size can also be arbitarily increased or decreased by providing a number to `size` prop. For a custom icon, you can set a different size of width and height using styles.

```jsx
import {
  faHouseUser,
  faTable,
  faShareAlt
} from '@fortawesome/free-solid-svg-icons'
import CustomIconExample from './CustomIconExample.svg'
```

```jsx example
const [numSize, setNumSize] = useState('80')
return (
  <Content>
    <Row align='around'>
      <Icon size='xs' icon={faShareAlt} />
      <Icon size='s' icon={faHouseUser} />
      <Icon icon={faTable} />
      <Icon size='l' icon={faShareAlt} />
      <Icon size='xl' icon={faHouseUser} />
      <Icon size='xxl' icon={faTable} />
      <Icon style={{ width: 40, height: 32 }} icon={CustomIconExample} />
    </Row>
    <Br />
    <TextInput
      label='Type in number to change icon size'
      value={numSize}
      onChangeText={value => setNumSize(value)}
    />
    <Br />
    <Icon size={+numSize} icon={faTable} />
  </Content>
)
```

## Colors

Color can be set by specifying the `color` in StyleSheet.

In `.styl` file
```stylus
.icon
  &.primary
    color: $UI.colors.primary

  &.success
    color $UI.colors.success

  &.orange
    color $UI.colors.additional0
```

```jsx
import {
  faHouseUser,
  faTable,
  faShareAlt
} from '@fortawesome/free-solid-svg-icons'
```

```jsx example
return (
  <Row align='around'>
    <Icon icon={faShareAlt} styleName='icon orange'/>
    <Icon icon={faHouseUser} styleName='icon primary'/>
    <Icon icon={faTable} styleName='icon success'/>
  </Row>
)
```

## Sandbox

<Sandbox
  Component={Icon}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
/>