import React from 'react';
import { SizableText as Text } from '@tamagui/text';
import { XStack } from '@tamagui/stacks';
import { useAdminTheme } from '../theme';

export function Tag({ label, color }: { label: string; color?: string }) {
  const { border, text } = useAdminTheme();
  const baseColor = color ?? border;

  return (
    <XStack
      alignItems="center"
      paddingHorizontal="$2"
      paddingVertical={2}
      borderRadius={999}
      backgroundColor={`${baseColor}22`}
      borderWidth={1}
      borderColor={`${baseColor}55`}
      alignSelf="flex-start"
    >
      <Text fontSize={11} fontWeight="600" color={text}>
        {label}
      </Text>
    </XStack>
  );
}
