Box

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Stack,
  Box,
  HStack,
  Text,
  Button,
  Badge,
  Paragraph
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Team plan</CardTitle>
          <CardDescription>Everything a growing team needs.</CardDescription>
        </CardHeader>
        <CardContent>
          <Stack gap={4}>
            <Box padding={4} background="muted">
              <HStack justify="between" align="baseline">
                <Text size="sm" tone="muted">per month</Text>
                <Text size="xl" weight="semibold">€24</Text>
              </HStack>
            </Box>
            <Stack gap={2}>
              <Text size="sm">Unlimited projects</Text>
              <Text size="sm">Shared themes</Text>
              <Text size="sm">Priority support</Text>
            </Stack>
            <Button fullWidth>Choose the team plan</Button>
          </Stack>
        </CardContent>
      </Card>
      <Box padding={6} background="surface">
        <Stack gap={3}>
          <HStack gap={2} align="center">
            <Badge variant="primary">Tip</Badge>
            <Text size="sm" weight="medium">Space with tokens</Text>
          </HStack>
          <Paragraph size="sm" tone="muted">
            Spacing follows the shared token scale. Use named aliases when
            the exact step matters less than a consistent rhythm.
          </Paragraph>
          <Box padding={4} paddingX={6} background="muted">
            <Text size="sm">A nested box resets the rhythm.</Text>
          </Box>
        </Stack>
      </Box>
      <Box
        as="section"
        aria-label="Notification summary"
        padding={4}
        paddingX={6}
        background="surface"
      >
        <HStack gap={3} align="start">
          <Badge variant="success">New</Badge>
          <Stack gap={1}>
            <Text weight="medium">Three files changed</Text>
            <Text size="sm" tone="muted">
              Review the pull request before the next release.
            </Text>
          </Stack>
        </HStack>
      </Box>
    </div>
  );
}