import React from 'react';
import { Box, Text } from '@anthropic/ink';
import { Byline } from '@anthropic/ink';

type Props = {
  serverToolsCount: number;
  serverPromptsCount: number;
  serverResourcesCount: number;
};

export function CapabilitiesSection({
  serverToolsCount,
  serverPromptsCount,
  serverResourcesCount,
}: Props): React.ReactNode {
  const capabilities = [];
  if (serverToolsCount > 0) {
    capabilities.push('tools');
  }
  if (serverResourcesCount > 0) {
    capabilities.push('resources');
  }
  if (serverPromptsCount > 0) {
    capabilities.push('prompts');
  }

  return (
    <Box>
      <Text bold>Capabilities: </Text>
      <Text color="text">{capabilities.length > 0 ? <Byline>{capabilities}</Byline> : 'none'}</Text>
    </Box>
  );
}
