// A scratchpad: several real, themed ways to show one thing — here, a deploy's
// status. Each option is built from @mantine/core, so it carries your theme. The
// design agent writes files like this; open the Design tab → Scratchpad to compare
// them on the canvas and pick the one you like.
import {
  Alert,
  Badge,
  Group,
  Indicator,
  Paper,
  Progress,
  RingProgress,
  Stack,
  Text,
} from '@mantine/core'

export const title = 'Status display'

export const objects = [
  {
    name: 'Status pill',
    mantine: ['Badge'],
    render: () => (
      <Badge color="green" variant="light" size="lg" radius="sm">
        Live
      </Badge>
    ),
  },
  {
    name: 'Progress card',
    mantine: ['Paper', 'Progress'],
    render: () => (
      <Paper withBorder p="md" radius="md" maw={220}>
        <Stack gap={8}>
          <Group justify="space-between">
            <Text size="sm" fw={600}>
              Deploying
            </Text>
            <Text size="xs" c="dimmed">
              72%
            </Text>
          </Group>
          <Progress value={72} color="blue" radius="xl" />
        </Stack>
      </Paper>
    ),
  },
  {
    name: 'Solid badge',
    mantine: ['Badge'],
    render: () => (
      <Badge color="green" variant="filled" size="lg" radius="sm">
        Deployed
      </Badge>
    ),
  },
  {
    name: 'Progress ring',
    mantine: ['RingProgress'],
    render: () => (
      <RingProgress
        size={92}
        thickness={9}
        roundCaps
        sections={[{ value: 72, color: 'blue' }]}
        label={
          <Text ta="center" size="sm" fw={700}>
            72%
          </Text>
        }
      />
    ),
  },
  {
    name: 'Inline dot',
    mantine: ['Indicator'],
    render: () => (
      <Group gap={10}>
        <Indicator color="green" size={9} processing />
        <Text size="sm" fw={500}>
          Running
        </Text>
      </Group>
    ),
  },
  {
    name: 'Tinted banner',
    mantine: ['Alert'],
    render: () => (
      <Alert color="green" radius="md" title="Deployment succeeded" maw={240}>
        Your changes are live in production.
      </Alert>
    ),
  },
]