import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { View } from 'react-native';
import {
    mainColors,
    colorPalette,
    colorGuide,
    fontNameSpaces,
    getButtonConfig,
} from '../../primitives';
import { ElevatedCard, Column, HorizontalSpacer, Row, Tag, Typography, Button } from '..';

<Meta title="Components/ElevatedCard" component={ElevatedCard} />

# ElevatedCard

Card component with plunks at right & bottom edges. Just wrap your card-content inside ElevatedCard component to make it elevated.

export const CardTemplate = (args) => <ElevatedCard {...args} />;

## Usage

<Canvas>
    <Story
        name="Basic Card"
        args={{
            backgroundColor: '#AE275F',
            edgeColors: {
                bottom: '#5C1532',
                right: '#851E49',
            },
            style: {
                width: 230,
            },
            children: (
                <Column style={{ padding: 20 }}>
                    <Row v="justify">
                        <View>
                            <Typography {...fontNameSpaces.tc12b} color={mainColors.white}>
                                ABCD Bank
                            </Typography>
                            <HorizontalSpacer n={2} />
                            <Typography
                                {...fontNameSpaces.tb11m}
                                color={colorPalette.popWhite[100]}
                                overflow="ellipsis"
                            >
                                XXX 1111
                            </Typography>
                        </View>
                        <Row
                            style={{
                                width: 32,
                                height: 32,
                                borderRadius: 16,
                                borderWidth: 1,
                                borderColor: mainColors.white,
                            }}
                            h="center"
                            v="center"
                        >
                            <View
                                style={{
                                    width: 20,
                                    height: 20,
                                    borderRadius: 10,
                                    backgroundColor: colorPalette.popWhite[300],
                                }}
                            />
                        </Row>
                    </Row>
                    <HorizontalSpacer n={8} />
                    <View style={{ maxWidth: '50%' }}>
                        <Tag
                            colorConfig={{
                                background: mainColors.yellow,
                                color: colorPalette.popWhite[400],
                            }}
                        >
                            Due Today
                        </Tag>
                    </View>
                    <HorizontalSpacer n={2} />
                    <Typography {...fontNameSpaces.th16b} color={mainColors.white}>
                        ₹1000.00
                    </Typography>
                    <HorizontalSpacer n={4} />
                    <Button {...getButtonConfig('blp50p1')} fullWidth>
                        Pay Now
                    </Button>
                </Column>
            ),
        }}
    >
        {CardTemplate.bind({})}
    </Story>
</Canvas>

```jsx
import * as React from 'react';
import {
    ElevatedCard,
    Column,
    Row,
    Typography,
    HorizontalSpacer,
    Tag,
    Button,
} from 'neopop-react-native/components';
import {
    mainColors,
    colorPalette,
    colorGuide,
    fontNameSpaces,
    getButtonConfig,
} from 'neopop-react-native/primitives';

const Card = () => (
    <ElevatedCard
        backgroundColor="#AE275F"
        edgeColors={{
            bottom: '#5C1532',
            right: '#851E49',
        }}
        style={{
            width: 230,
        }}
    >
        <View style={{ padding: 20 }}>
            <Column>
                <Row v="justify">
                    <View>
                        <Typography {...fontNameSpaces.tc12b} color={mainColors.white}>
                            ABCD Bank
                        </Typography>
                        <HorizontalSpacer n={2} />
                        <Typography
                            {...fontNameSpaces.tb11m}
                            color={colorPalette.popWhite[100]}
                            overflow="ellipsis"
                        >
                            XXX 1111
                        </Typography>
                    </View>
                    <Row
                        style={{
                            width: 32,
                            height: 32,
                            borderRadius: 16,
                            borderWidth: 1,
                            borderColor: mainColors.white,
                        }}
                        h="center"
                        v="center"
                    >
                        <View
                            style={{
                                width: 20,
                                height: 20,
                                borderRadius: 10,
                                backgroundColor: colorPalette.popWhite[300],
                            }}
                        />
                    </Row>
                </Row>
                <HorizontalSpacer n={8} />
                <View style={{ maxWidth: '50%' }}>
                    <Tag
                        colorConfig={{
                            background: mainColors.yellow,
                            color: colorPalette.popWhite[400],
                        }}
                    >
                        Due Today
                    </Tag>
                </View>
                <HorizontalSpacer n={2} />
                <Typography {...fontNameSpaces.th16b} color={mainColors.white}>
                    ₹1000.00
                </Typography>
                <HorizontalSpacer n={4} />
                <Button {...getButtonConfig('blp50p1')} fullWidth={true}>
                    Pay Now
                </Button>
            </Column>
        </View>
    </ElevatedCard>
);

export default Card;
```

## Props

<ArgsTable of={ElevatedCard} />