import { useState, useCallback } from 'react'
import { pug } from 'startupjs'
import Avatar from '../Avatar'
import Row from '../Row'
import Div from '../Div'
import Span from '../typography/Span'
import Br from '../Br'
import { Sandbox } from '@startupjs/docs'
import { styl } from 'startupjs'

# Avatar
Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent a brand. They also can be a placeholder when there is no image or image can't be loaded by some reason to be shown, showing an alternative in this case.

```js
import { Avatar } from '@startupjs/ui'
```

## Simple example

```jsx example
return pug`
  Avatar(src='/img/avatar1.jpeg')
`
```

## Sizes
Size is `m` by default. It can be changed by changing the `size` property by setting it to one of the values ​​('s', 'm', 'l') or by specifying the size in pixels.

```jsx example
return pug`
  Row
    Div
      Avatar(
        size='s'
        src='/img/avatar2.jpeg'
      )
    Div(pushed)
      Avatar(
        size='m'
        src='/img/avatar3.jpeg'
      )
    Div(pushed)
      Avatar(
        size='l'
        src='/img/avatar1.jpeg'
      )
    Div(pushed)
      Avatar(
        size=60
        src='/img/avatar3.jpeg'
      )
`
```

## User status
Avatars can be used to display user online status. It can be set by passing string `online` or `away` to property `status`.

```jsx example
return pug`
  Row
    Div
      Avatar(
        status='online'
        src='/img/avatar1.jpeg'
      )
    Div(pushed)
      Avatar(
        status='away'
        src='/img/avatar2.jpeg'
      )
`
```

Also you can provide custom components for the status icon using `statusComponents` prop.

```jsx example
const AbsentStatus = useCallback(({ style }) => (
  <Div style={style} styleName='absent'>
    <Div styleName='absent-line absent-line-1' />
    <Div styleName='absent-line absent-line-2' />
  </Div>
))

return pug`
  Avatar(
    pushed
    src='/img/avatar2.jpeg'
    status='absent'
    statusComponents={
      absent: AbsentStatus
    }
  )
`

styl`
  .absent
    background-color white
    justify-content center
    &-line
      position absolute
      height 2px
      left 0
      right 0
      background-color red
      &-1
        transform rotate(45deg)
      &-2
        transform rotate(-45deg)
`
```

## Fallback string
If `url` prop is not provided or if there is an error loading the avatar image, the component using an alternative. The alternative is initials of two first words of `children` string if provided and `?` if not. In the example below alternative is 'John Doe' therefore 'JD' will be displayed.

```jsx example
return pug`
  Row
    Div
      Avatar(src='/img/non-existen-image.jpeg')
    Div(pushed)
      Avatar(
        src='/img/non-existen-image.jpeg'
      ) John Doe
`
```

## Actions

Passed handler to `onPress` property will be called when the user taps the component.

```jsx example
const [counter, setCounter] = useState(0)

return pug`
  Div
    Avatar(
      src='/img/avatar1.jpeg'
      onPress=()=> setCounter(counter + 1)
    )
    Br
    Span= 'Clicked ' + counter + ' times'
`
```

## Sandbox

<Sandbox
  Component={Avatar}
  props={{
    onPress: () => alert('"onPress" event on "Avatar" component'),
  }}
/>