import React from 'react';
import { XStack, YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';

type StackProps = React.ComponentProps<typeof YStack>;

type RowProps = React.ComponentProps<typeof XStack>;

export function MockupCard({ children, ...props }: StackProps) {
  return (
    <YStack
      padding="$4"
      borderRadius="$card"
      backgroundColor="$surface"
      borderWidth={1}
      borderColor="$borderColor"
      gap="$3"
      {...props}
    >
      {children}
    </YStack>
  );
}

export function MockupTile({ children, ...props }: StackProps) {
  return (
    <YStack
      padding="$3"
      borderRadius="$tile"
      backgroundColor="$muted"
      borderWidth={1}
      borderColor="$borderColor"
      gap="$2"
      {...props}
    >
      {children}
    </YStack>
  );
}

export function MockupChip({ children, ...props }: RowProps) {
  return (
    <XStack
      alignItems="center"
      gap="$2"
      paddingVertical="$2"
      paddingHorizontal="$3"
      borderRadius="$pill"
      backgroundColor="$surface"
      borderWidth={1}
      borderColor="$borderColor"
      {...props}
    >
      {children}
    </XStack>
  );
}

export function MockupLabel({ children }: { children: React.ReactNode }) {
  return (
    <Text fontSize="$2" color="$color" opacity={0.6}>
      {children}
    </Text>
  );
}