'use client'

import React from 'react'
import { Text, Stack } from 'biibaos'

export default function TypographyVariants() {
  return (
    <Stack gap={16} direction="column">
      <Text variant="display">Display</Text>
      <Text variant="h1">Heading 1</Text>
      <Text variant="h2">Heading 2</Text>
      <Text variant="h3">Heading 3</Text>
      <Text variant="h4">Heading 4</Text>
      <Text variant="body">Body (Default)</Text>
      <Text variant="caption">Caption text</Text>
      <Text variant="mono">Monospace</Text>
    </Stack>
  )
}

'use client'

import React from 'react'
import { Text, View } from 'biibaos'

export default function ClampingExample() {
  return (
    <View w={300}>
      <Text maxLines={3} color="muted" variant="body-sm">
        BiibaOS is a high-fidelity design system focused on speed and aesthetic. It provides a set of highly optimized components that look great out of the box. This paragraph is actually much longer than it appears, but it is being clamped to exactly three lines to maintain the vertical rhythm of the container.
      </Text>
    </View>
  )
}

'use client'

import React from 'react'
import { Text, View, Stack } from 'biibaos'

export default function ProfileHeader() {
  return (
    <Stack direction="column" gap={24} style={{ maxWidth: 450 }}>
      {/* Profile Header */}
      <View display="flex" align="center" gap={12} p={16} bg="surface" radius="lg" border>
        <View w={48} h={48} radius="full" bg="primary" />
        <View flex={1}>
          <Text variant="h3" weight="bold">Alexander Graham</Text>
          <Text variant="caption" color="muted" transform="uppercase" weight="semibold">
            Product Designer • San Francisco
          </Text>
        </View>
      </View>

      {/* Article Preview */}
      <View>
        <Text variant="label" color="primary" transform="uppercase" weight="bold" size={10}>
          Engineering
        </Text>
        <Text variant="h2" weight="bold" style={{ margin: '8px 0' }}>
          The future of agentic coding interfaces
        </Text>
        <Text variant="body-sm" color="muted" maxLines={2}>
          How we built a design system that adapts to the speed of AI-driven development.
        </Text>
      </View>
    </Stack>
  )
}