// A richer scratchpad: several ways to display the SAME entity (a team member)
// in a list or grid. Every option is a real @mantine/core composition — picking
// one gives you an adoptable component variation, not a pile of CSS. Open the
// Design tab → Scratchpad to compare them on the canvas.
import {
  Anchor,
  Avatar,
  Badge,
  Button,
  Card,
  Divider,
  Group,
  Paper,
  Progress,
  Stack,
  Text,
} from '@mantine/core'

export const title = 'Member card'

export const objects = [
  {
    name: 'List row',
    mantine: ['Group', 'Avatar', 'Badge'],
    render: () => (
      <Group wrap="nowrap" maw={264} gap="sm">
        <Avatar radius="xl" color="grape">
          AL
        </Avatar>
        <div style={{ flex: 1, minWidth: 0 }}>
          <Text size="sm" fw={600} truncate>
            Ada Lovelace
          </Text>
          <Text size="xs" c="dimmed" truncate>
            ada@example.com
          </Text>
        </div>
        <Badge color="green" variant="light" radius="sm">
          Active
        </Badge>
      </Group>
    ),
  },
  {
    name: 'Detail card',
    mantine: ['Card', 'Avatar', 'Badge', 'Divider'],
    render: () => (
      <Card withBorder radius="md" padding="md" maw={248}>
        <Group justify="space-between" wrap="nowrap">
          <Group gap="sm" wrap="nowrap">
            <Avatar radius="xl" color="grape">
              AL
            </Avatar>
            <div style={{ minWidth: 0 }}>
              <Text size="sm" fw={600} truncate>
                Ada Lovelace
              </Text>
              <Text size="xs" c="dimmed">
                Engineering
              </Text>
            </div>
          </Group>
          <Badge color="green" variant="dot">
            Online
          </Badge>
        </Group>
        <Divider my="sm" />
        <Group justify="space-between">
          <Stack gap={0}>
            <Text size="xs" c="dimmed">
              Commits
            </Text>
            <Text size="sm" fw={600}>
              1,204
            </Text>
          </Stack>
          <Stack gap={0}>
            <Text size="xs" c="dimmed">
              Reviews
            </Text>
            <Text size="sm" fw={600}>
              318
            </Text>
          </Stack>
          <Anchor size="xs" fw={500}>
            View
          </Anchor>
        </Group>
      </Card>
    ),
  },
  {
    name: 'Grid tile',
    mantine: ['Card', 'Avatar', 'Button'],
    render: () => (
      <Card withBorder radius="md" padding="lg" maw={184}>
        <Stack align="center" gap="xs">
          <Avatar size="lg" radius="xl" color="grape">
            AL
          </Avatar>
          <Text size="sm" fw={600}>
            Ada Lovelace
          </Text>
          <Badge color="grape" variant="light" radius="sm">
            Maintainer
          </Badge>
          <Button size="xs" variant="light" fullWidth mt={4}>
            View profile
          </Button>
        </Stack>
      </Card>
    ),
  },
  {
    name: 'Compact chip',
    mantine: ['Badge', 'Avatar'],
    render: () => (
      <Badge
        size="lg"
        radius="xl"
        variant="light"
        color="grape"
        pl={3}
        leftSection={
          <Avatar size={18} radius="xl" color="grape">
            AL
          </Avatar>
        }
      >
        Ada Lovelace
      </Badge>
    ),
  },
  {
    name: 'Stat card',
    mantine: ['Paper', 'Progress', 'Badge'],
    render: () => (
      <Paper withBorder radius="md" p="md" maw={224}>
        <Group justify="space-between" mb={6}>
          <Text size="xs" c="dimmed" fw={600} tt="uppercase">
            Contribution
          </Text>
          <Badge color="teal" variant="light" size="sm">
            +12%
          </Badge>
        </Group>
        <Text size="xl" fw={700} lh={1}>
          84%
        </Text>
        <Progress value={84} color="grape" radius="xl" mt="sm" />
      </Paper>
    ),
  },
]