FocusScope

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Stack,
  HStack,
  Badge,
  Text,
  Box,
  Button,
  FocusScope
} 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>Inline confirmation</CardTitle>
          <CardDescription>
            A non-modal confirmation that still owns the keyboard while it
            is open.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Stack gap={3}>
            <HStack gap={2} align="center">
              <Badge variant="warning">Draft</Badge>
              <Text size="sm" tone="muted">Unsaved changes in the editor.</Text>
            </HStack>
            <Box
              padding={4}
              background="muted"
              style={{
                borderRadius: "var(--pimolu-radius-md)",
              }}
            >
              <Stack gap={3}>
                <Text size="sm">Publish the draft and notify the team?</Text>
                <HStack gap={2} wrap>
                  <Button size="sm" appearance="outline">Keep editing</Button>
                  <Button size="sm">Publish</Button>
                </HStack>
              </Stack>
            </Box>
            <Text size="sm" tone="muted">
              The confirmation can wrap the actions in a FocusScope and set
              active while it is open; the page behind it stays interactive.
            </Text>
          </Stack>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Skip link target</CardTitle>
          <CardDescription>
            Pair a focus scope with a skip link to move keyboard users into
            the main content.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Stack gap={3}>
            <Text size="sm" tone="muted">
              A skip link focuses the main region; the scope then keeps Tab
              inside until the user leaves it deliberately.
            </Text>
            <FocusScope as="section" aria-label="Main content demo" active={false}>
              <Box
                padding={4}
                background="surface"
                style={{
                  borderRadius: "var(--pimolu-radius-md)",
                }}
              >
                <Stack gap={2}>
                  <Text weight="medium">Main content</Text>
                  <Text size="sm" tone="muted">
                    An inactive scope renders no trap and leaves the normal page
                    order intact.
                  </Text>
                </Stack>
              </Box>
            </FocusScope>
          </Stack>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Drawer body</CardTitle>
          <CardDescription>
            The same scope can live inside a drawer without importing the
            drawer.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Stack gap={3}>
            <HStack gap={2} align="center">
              <Badge variant="secondary">Settings</Badge>
              <Text size="sm" tone="muted">Focus returns to the menu button on close.</Text>
            </HStack>
            <Stack gap={2}>
              <Button size="sm" appearance="outline" fullWidth>Account</Button>
              <Button size="sm" appearance="outline" fullWidth>Appearance</Button>
              <Button size="sm" appearance="outline" fullWidth>Notifications</Button>
            </Stack>
          </Stack>
        </CardContent>
      </Card>
    </div>
  );
}