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
Inherits [Div props](/docs/components/Div).

Cards contain content and actions about a single subject.

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

## Simple example

Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.

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

## Outlined cards

Outlined cards offer an alternative style by passing `outlined` string on `variant` property to component.

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

## Levels of emphasis

Card `level` prop determines different levels of emphasis, depending on its level of hierarchy. It only make sense when the `variant` is `elevated` (default).

```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>
)
```

## Complex interaction (intergration with other components)

```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'),
  }}
/>