/**
 * WordPress dependencies.
 */
import {
    arrowUp,
    box,
    trendingUp
} from "@wordpress/icons";

import {
    Card,
    Icon,
    CardBody,
    __experimentalGrid as Grid,
    __experimentalText as Text,
    __experimentalHeading as Heading,
    __experimentalHStack as HStack,
    __experimentalVStack as VStack,
} from "@wordpress/components";

/**
 * Render Stats
 */
function Stats1() {
    const cardData = [
        {
            icon: trendingUp,
            title: "Total Sales",
            amount: "₹5,957,551",
            change: "122",
            Color: "green",
        },
        {
            icon: trendingUp,
            title: "Net Sales",
            amount: "₹5,140,956",
            change: "5.4%",
            Color: "green",
        },
        {
            icon: box,
            title: "Orders",
            amount: "300",
            change: "3.2%",
            Color: "green",
        }
    ];
    return (
        <Grid spacing={5} columns={[1, 2, 3]}>
            {cardData.map((data, index) => (
                <Card key={index} style={{ width: '100%' }}>
                    <CardBody>
                        <HStack alignment="left" spacing={6}>
                            <Icon
                                icon={data.icon}
                                fill="white"
                                size={30}
                                style={{ backgroundColor: '#3858e9', borderRadius: '6px', padding: '8px' }} />
                            <VStack>
                                <Text size={18} variant="muted">{data.title}</Text>
                                <HStack>
                                    <Heading level={2}>{data.amount}</Heading>
                                    <HStack alignment="bottomRight" spacing={0}>
                                        <Icon icon={arrowUp} fill={data.Color} />
                                        <Text color={data.Color} size={14}>{data.change}</Text>
                                    </HStack>
                                </HStack>
                            </VStack>
                        </HStack>
                    </CardBody>
                    <CardBody isShady>
                        <Heading level={4}>View all</Heading>
                    </CardBody>
                </Card>
            ))}
        </Grid>
    );
};

export default Stats1;

/**
 * WordPress dependencies.
 */
import {
    Card,
    Icon,
    __experimentalGrid as Grid,
    __experimentalText as Text,
    __experimentalHeading as Heading,
    __experimentalHStack as HStack,
    __experimentalVStack as VStack,
    __experimentalSurface as Surface
} from "@wordpress/components";
import {
    arrowUp,
    arrowDown
} from "@wordpress/icons";

/**
 * Render Stats
 */
function Stats2() {
    const cardData = [
        {
            title: 'Total Orders',
            current: '11,204',
            percentage: '5.0%',
            icon: arrowUp,
            iconColor: '#22C55D',
            textColor: '#176434',
            backgroundColor: '#DCFCE6'
        },
        {
            title: 'Avg. Order Value',
            current: '78.80%',
            percentage: '2.0%',
            icon: arrowUp,
            iconColor: '#22C55D',
            textColor: '#176434',
            backgroundColor: '#DCFCE6'
        },
        {
            title: 'Order Conversion Rate',
            current: '12.43%',
            percentage: '2.05%',
            icon: arrowDown,
            iconColor: '#B04A48',
            textColor: '#B04A48',
            backgroundColor: '#FDE2E1'
        }
    ];
    return (
        <Card isBorderless isRounded>
            <VStack spacing={5}>
                <Heading level={3}>Last 7 days</Heading>
                <Grid columns={[1, 2, 3]} gap={0}>
                    {cardData.map((data, index) => (
                        <Card key={index} style={{ padding: '20px' }}>
                            <VStack spacing={2}>
                                <Heading level={5} weight={500}>{data.title}</Heading>
                                <HStack>
                                    <Heading level={2} color="#3858E9">{data.current}</Heading>
                                    <Surface
                                        style={{
                                            backgroundColor: data.backgroundColor,
                                            padding: '0px 15px 0px 5px'
                                        }}>
                                        <HStack spacing={0}>
                                            <Icon icon={data.icon} fill={data.iconColor} />
                                            <Text weight={500} color={data.textColor}>{data.percentage}</Text>
                                        </HStack>
                                    </Surface>
                                </HStack>
                            </VStack>
                        </Card>
                    ))}
                </Grid>
            </VStack>
        </Card>
    );
};

export default Stats2;

/**
 * WordPress dependencies.
 */
import {
    Card,
    CardBody,
    __experimentalText as Text,
    __experimentalHeading as Heading,
    __experimentalGrid as Grid,
    __experimentalVStack as VStack,
} from "@wordpress/components";

/**
 * Render Stats
 */
function Stats3() {
    const cardData = [
        {
            label: 'Total Orders',
            value: '71,987'
        },
        {
            label: 'Avg. Order Value',
            value: '₹100,000'
        },
        {
            label: 'Order Conversion Rate',
            value: '24.57%'
        }
    ];
    return (
        <Card isBorderless isRounded>
            <VStack spacing={5}>
                <Heading level={3}>Last 30 days</Heading>
                <Grid columns={[1, 2, 3]} gap={0}>
                    {cardData.map((data, index) => (
                        <Card key={index}>
                            <CardBody>
                                <VStack>
                                    <Text size={14}>{data.label}</Text>
                                    <Heading level={2}>{data.value}</Heading>
                                </VStack>
                            </CardBody>
                        </Card>
                    ))}
                </Grid>
            </VStack>
        </Card>
    );
};

export default Stats3;

/**
 * WordPress dependencies.
 */
import {
    Card,
    Icon,
    __experimentalGrid as Grid,
    __experimentalText as Text,
    __experimentalHeading as Heading,
    __experimentalHStack as HStack,
    __experimentalVStack as VStack,
    DropdownMenu
} from "@wordpress/components";
import { arrowUp, arrowDown, trendingUp, moreVertical, trendingDown, receipt } from "@wordpress/icons";

/**
 * Render Stats
 */
function Stats4() {
    const cardData = [
        {
            title: 'Total Orders',
            current: '11,204',
            percentage: '48%',
            icon: arrowUp,
            iconColor: '#22C55D',
            backgroundColor: '#DCFCE6'
        },
        {
            title: 'Avg. Order Value',
            current: '34.27%',
            percentage: '2.6%',
            icon: arrowUp,
            iconColor: '#22C55D',
            backgroundColor: '#DCFCE6'
        },
        {
            title: 'Order Conversion Rate',
            current: '12.56%',
            percentage: '1.8%',
            icon: arrowDown,
            iconColor: '#B04A48',
            backgroundColor: '#FDE2E1'
        }
    ];
    return (
        <Card isBorderless isRounded>
            <VStack spacing={5}>
                <Heading level={3}>Last 7 Days</Heading>
                <Grid columns={[1, 2, 3]} gap={5}>
                    {cardData.map((data, index) => (
                        <Card key={index} style={{ padding: '20px' }}>
                            <VStack alignment="left" spacing={3}>
                                <HStack>
                                    <Icon icon={trendingUp} fill="white" size={45}
                                        style={{ backgroundColor: '#3858e9', borderRadius: '6px' }} >
                                    </Icon>
                                    <DropdownMenu
                                        icon={moreVertical}
                                        label="Select a direction"
                                        controls={[
                                            {
                                                title: 'view orders',
                                                icon: receipt,
                                            }
                                        ]}
                                    />
                                </HStack>
                                <VStack expanded={false} spacing={1}>
                                    <Heading level={5} weight={500} variant='muted'>{data.title}</Heading>
                                    <HStack>
                                        <Heading level={2}>{data.current}</Heading>
                                        <HStack expanded={false} spacing={0}>
                                            <Icon icon={data.icon} fill={data.iconColor} size={20}
                                                style={{ backgroundColor: data.backgroundColor, marginRight:"4px" }} />
                                            <Text weight={500} color={data.iconColor}>{data.percentage}</Text>
                                        </HStack>
                                    </HStack>
                                </VStack>
                            </VStack>
                        </Card>
                    ))}
                </Grid>
            </VStack>
        </Card>
    );
};

export default Stats4;