// A scratchpad of the "non-happy" states for a list or page — loading, empty,
// error, and skeleton. Each option is a real @mantine/core composition so the one
// you pick drops straight into your app as a component variation. Open the Design
// tab → Scratchpad to compare them on the canvas.
import { Alert, Button, Center, Group, Loader, Paper, Skeleton, Stack, Text, ThemeIcon } from '@mantine/core'

export const title = 'Empty & loading states'

export const objects = [
  {
    name: 'Loading',
    mantine: ['Loader', 'Stack'],
    render: () => (
      <Stack align="center" gap="xs" maw={200} py="sm">
        <Loader size="md" color="grape" />
        <Text size="sm" c="dimmed">
          Loading your items…
        </Text>
      </Stack>
    ),
  },
  {
    name: 'Empty',
    mantine: ['ThemeIcon', 'Stack', 'Button'],
    render: () => (
      <Stack align="center" gap="xs" maw={224} py="sm">
        <ThemeIcon size={46} radius="xl" variant="light" color="grape">
          <Text size="xl">✦</Text>
        </ThemeIcon>
        <Text size="sm" fw={600}>
          No items yet
        </Text>
        <Text size="xs" c="dimmed" ta="center">
          Create your first item to get started.
        </Text>
        <Button size="xs" variant="light" mt={4}>
          New item
        </Button>
      </Stack>
    ),
  },
  {
    name: 'Error',
    mantine: ['Alert', 'Button'],
    render: () => (
      <Alert color="red" radius="md" title="Couldn't load" maw={236}>
        <Stack gap="xs">
          <Text size="xs">Something went wrong fetching your items.</Text>
          <Button size="xs" variant="white" color="red" w="fit-content">
            Try again
          </Button>
        </Stack>
      </Alert>
    ),
  },
  {
    name: 'Skeleton list',
    mantine: ['Skeleton', 'Group'],
    render: () => (
      <Stack gap="sm" maw={236}>
        {[0, 1, 2].map((i) => (
          <Group key={i} wrap="nowrap" gap="sm">
            <Skeleton height={32} circle />
            <Stack gap={6} style={{ flex: 1 }}>
              <Skeleton height={8} radius="xl" />
              <Skeleton height={8} width="60%" radius="xl" />
            </Stack>
          </Group>
        ))}
      </Stack>
    ),
  },
  {
    name: 'Inline empty',
    mantine: ['Paper', 'Center'],
    render: () => (
      <Paper radius="md" p="lg" maw={236} style={{ borderStyle: 'dashed' }} withBorder>
        <Center>
          <Text size="sm" c="dimmed">
            Nothing here yet — drop something in.
          </Text>
        </Center>
      </Paper>
    ),
  },
]