import { Card, CardBody, Text, Flex } from '@photonix/ultimate';

<Flex gap="md" wrap="wrap">
  {/* Elevated (Default) */}
  <Card variant="elevated" w={200}>
    <CardBody>
      <Text variant="title-sm">Elevated</Text>
      <Text variant="body-sm" color="secondary">Has shadow</Text>
    </CardBody>
  </Card>

  {/* Outlined */}
  <Card variant="outlined" w={200}>
    <CardBody>
      <Text variant="title-sm">Outlined</Text>
      <Text variant="body-sm" color="secondary">Has border</Text>
    </CardBody>
  </Card>

  {/* Filled */}
  <Card variant="filled" w={200}>
    <CardBody>
      <Text variant="title-sm">Filled</Text>
      <Text variant="body-sm" color="secondary">Has background</Text>
    </CardBody>
  </Card>
</Flex>

<Flex gap="md" wrap="wrap">
  {/* Dark Image — text auto-switches to white */}
<Card variant="overlay" w={300} h={400}>
    <CardImage position="fill" src={DARK_IMAGE} alt="Architecture" />
    <Box style={{ position: 'absolute', top: 8, right: 8, zIndex: 2 }}>
      <IconButton variant="tertiary" size="small" icon={<MoreVerticalOutline />} aria-label="More" />
    </Box>
    <div style={{ flex: 1 }} />
    <CardHeader
      title="Urban Architecture"
      subtitle="The intersection of architecture and the city."
    />
    <CardFooter justify="between">
      <HStack gap="sm">
        <HStack gap="4xs" align="center">
          <UserOutline size={24} />
          <Text variant="title-md">1.2k</Text>
        </HStack>
      </HStack>
      <Button size="small" variant="secondary" leadingIcon={<AddOutline size={16} />}>Follow</Button>
    </CardFooter>
  </Card>

  {/* Light Image — text stays dark automatically */}
  <Card variant="overlay" w={300} h={400}>
    <CardImage position="fill" src={LIGHT_IMAGE} alt="Light Demo" />
    {/* ... contents ... */}
  </Card>
</Flex>

<Flex gap="md">
  <Card isHoverable w={200}>
    <CardBody>
      <Text variant="title-sm">Hover me</Text>
      <Text variant="body-sm" color="secondary">I lift up on hover</Text>
    </CardBody>
  </Card>
  
  <Card isHoverable isClickable w={200}>
    <CardBody>
      <Text variant="title-sm">Click me</Text>
      <Text variant="body-sm" color="secondary">I'm clickable too</Text>
    </CardBody>
  </Card>
</Flex>

<Card w={360}>
  <Box p="2xs" pb="none">
    <CardImage 
      rounded 
      src="/card_architecture.png" 
      alt="Architecture" 
      style={{ aspectRatio: '16/9' }} 
    />
  </Box>
  <CardHeader
    title="Modern Architecture"
    isVerified
    subtitle="Clean lines and minimalist design."
  />
  <CardFooter justify="between">
    <HStack gap="sm">
      <HStack gap="4xs" align="center">
        <UserOutline size={24} />
        <Text variant="title-md">1.2k</Text>
      </HStack>
    </HStack>
    <Button size="small">Read More</Button>
  </CardFooter>
</Card>

<Card w={360}>
  <CardImage src="/card_nature.png" alt="Nature" style={{ aspectRatio: '16/9' }} />
  <CardHeader
    title="Mountain Serenity"
    isVerified
    subtitle="Exploring the peaceful peaks."
  />
  <CardFooter justify="between">
    <HStack gap="sm">
      <HStack gap="4xs" align="center">
        <UserOutline size={24} />
        <Text variant="title-md">842</Text>
      </HStack>
    </HStack>
    <Button size="small" variant="primary">Explore</Button>
  </CardFooter>
</Card>

<Card w={420}>
  <CardHeader
    avatar={<Box style={{ width: 40, height: 40, borderRadius: '50%', backgroundColor: 'var(--surface-brand-primary)' }} />}
    title="Alexander Wright"
    subtitle="2 hours ago • San Francisco"
    action={<IconButton variant="tertiary" size="small" icon={<MoreHorizontalOutline />} />}
  />
  <CardBody>
    <Text variant="body-lg">
      Just deployed the new Photonix design system update! 🚀
    </Text>
  </CardBody>
  <CardImage src="/card_fashion.png" style={{ aspectRatio: '16/9' }} />
  <CardFooter justify="between">
    {/* ... actions ... */}
  </CardFooter>
</Card>

<Card isHoverable w={300}>
  <CardImage src="/card_architecture.png" style={{ aspectRatio: '1/1' }} />
  {/* ... contents ... */}
</Card>

<Card orientation="horizontal" h={160} w="100%">
  <CardImage position="left" src="/path/to/image.jpg" style={{ width: 160 }} />
  <VStack flexGrow={1} flexShrink={1} flexBasis="0%" align="stretch" minW={0}>
    <CardHeader title="Card Title" subtitle="Description content..." />
    <div style={{ flex: 1 }} />
    <CardFooter justify="end">
      <Button variant="secondary">Action</Button>
    </CardFooter>
  </VStack>
</Card>