import { useState } from 'react'
import Card from '../Card'
import { H4 } from '../typography'
import Br from '../Br'
import Row from '../Row'
import Button from '../Button'
import Collapse from '../Collapse'
import Span from '../typography/Span'
import Div from '../Div'
import { u } from 'startupjs'
import { Image } from 'react-native'
import { faShareAlt } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'

# Card (карточка)
Наследует [Div props](/docs/components/Div).

Карточки содержат контент и действия, относящиеся к одной теме.

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

## Простой пример

Несмотря на то, что в карточках можно располагать несколько действий, элементы управления и выпадающие меню, будьте сдержаны и помните, что карточки - это входные точки для более сложной и детальной информации.

```jsx example
return (
  <Card>
    <H4>Card header</H4>
    <Br />
    <Span>Card body</Span>
  </Card>
)
```

## Контурные карточки

Контурные карточки предлагают альтернативный стиль, передвая `outlined` строку в свойство `variant` компонента.

```jsx example
return (
  <Card variant='outlined'>
    <H4>Card header</H4>
    <Br />
    <Span>Card body</Span>
  </Card>
)
```

## Уровни акцента

Свойство `level` карточки определяет различные уровни акцента, в зависимости от её уровня в иерархии. Это имеет смысл только тогда, когда `variant` - `elevated` (по умолчанию).

```jsx example
return (
  <Div>
    <Card>
      <H4>Card Level - 1</H4>
      <Br />
      <Span>Card body</Span>
    </Card>
    <Br />
    <Card level={2}>
      <H4>Card Level - 2</H4>
      <Br />
      <Span>Card body</Span>
    </Card>
    <Br />
    <Card level={3}>
      <H4>Card Level - 3</H4>
      <Br />
      <Span>Card body</Span>
    </Card>
    <Br />
    <Card level={4}>
      <H4>Card Level - 4</H4>
      <Br />
      <Span>Card body</Span>
    </Card>
  </Div>
)
```

## Сложное взаимодействие (интеграция с другими компонентами)

```jsx example
const style = { maxWidth: u(50) }
const imageStyle = { height: u(40), resizeMode: 'cover' }
const [collapsed, setCollapsed] = useState(false)
return (
  <Card
    style={style}
  >
    <Image
      source={{ uri: '/img/cat.webp' }}
      style={imageStyle}
    />
    <Br />
    <H4>Cat</H4>
    <Br />
    <Span>
      The cat (Felis catus) is a domestic species of small carnivorous mammal.
    </Span>
    <Br />
    <Row align='between'>
      <Button
        onPress={() => setCollapsed(!collapsed)}
        variant='flat'
      >
        Learn more
      </Button>
      <Button
        icon={faShareAlt}
        onPress={() => null}
      >
        Share
      </Button>
    </Row>
    <Br />
    <Collapse open={collapsed} variant='pure' icon={false}>
      <Collapse.Content>
        It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries. (source: wiki)
      </Collapse.Content>
    </Collapse>
  </Card>
)
```

## Sandbox

<Sandbox
  Component={Card}
  props={{
    children: [
      <H4 key='header'>Card header</H4>,
      <Br key='br'/>,
      <Span key='body'>Card body</Span>
    ],
    onPress: () => alert('"onPress" event on "Card" component'),
  }}
/>