import { CardGroup, CardGroupCard } from '@krakentech/coral-molecules';
 
<CardGroup>
    <CardGroupCard>Card</CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard
        backgroundImage={{
            src: 'https://res.cloudinary.com/tomsansome/image/upload/v1696504332/octo/house-illustration-good_osaymg.svg',
            width: 138,
            height: 95,
        }}
    >
        <Stack flexDirection="column">
            <Typography textStyle="h5">
                Card with background image and padding to the right to stop the
                copy overlapping that image.
            </Typography>
            <Typography>
                Dolore sunt cupidatat est ex adipisicing labore cillum dolore
                veniam ut non consectetur laborum officia. Culpa Lorem esse in
                mollit incididunt consequat laborum occaecat in. Fugiat sint ex
                mollit non in in amet. Elit dolor ullamco esse in id eiusmod eu
                nulla non reprehenderit dolor nostrud nostrud in.
            </Typography>
        </Stack>
    </CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard minHeight={200}>Card</CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard padding="small">Card</CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard theme="secondary900">Card</CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard>
        <Stack flexDirection="column" gap="xs">
            <Typography>Your energy balance</Typography>
            <Stack alignItems="baseline">
                <Typography textStyle="homepageTitle">
                    £324
                    <Typography textStyle="h3" component="span">
                        <strong>.56</strong>
                    </Typography>
                </Typography>
            <Typography>
                You&apos;re paying £120 on 1st May.
            </Typography>
        </Stack>
    </CardGroupCard>
    <CardGroupCard
        theme="secondary900"
        backgroundImage={{
            src: 'https://res.cloudinary.com/tomsansome/image/upload/v1696504332/octo/house-illustration-good_osaymg.svg',
            width: 138,
            height: 95,
        }}
    >
        <Stack flexDirection="column">
            // There will be instances where the title text should be a heading
            tag rather than a paragraph. You should check your page's heading
            hierarchy and set the component prop to the correct heading level to
            ensure your heading order is semantically correct
            <Typography textStyle="h5" component="p">
                You&apos;re{' '}
                <Typography color="success500" textStyle="h5" component="span">
                    all set
                </Typography>
            </Typography>
            <Typography>
                There&apos;s nothing urgent you need to do right now.
            </Typography>
        </Stack>
    </CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard minHeight={200}>Card</CardGroupCard>
    <CardGroupCard
        theme="secondary900"
        backgroundImage={{
            src: 'https://res.cloudinary.com/tomsansome/image/upload/v1696504332/octo/house-illustration-good_osaymg.svg',
            width: 138,
            height: 95,
        }}
    >
        Card
    </CardGroupCard>
    <CardGroupCard
        theme="base900"
        backgroundImage={{
            src: 'https://res.cloudinary.com/tomsansome/image/upload/v1696505828/octo/house-illustration-bad_ymusu4.svg',
            width: 138,
            height: 95,
        }}
    >
        Card
    </CardGroupCard>
</CardGroup>

<CardGroup>
    <CardGroupCard>Card</CardGroupCard>
    <CardGroupCard
        theme="secondary900"
        backgroundImage="none"
        minHeight={{ base: 200, md: 300 }}
    >
        Card
    </CardGroupCard>
</CardGroup>