import React from 'react';
import { Box } from './Box';
import { Text } from './Text';

interface FeatureQuoteProps {
  children: string;
  intent?: 'primary' | 'aqua' | 'amber' | 'low';
}

/**
 * FeatureQuote - A semantic quote component for features.
 */
export function FeatureQuote({ children, intent = 'primary' }: FeatureQuoteProps) {
  const borderColor = {
    primary: 'var(--ui-color-intent-primary)',
    aqua: 'var(--ui-color-intent-telemetry)',
    amber: 'var(--ui-color-intent-warning)',
    low: 'var(--ui-color-border-default)',
  }[intent];

  const bgColor = {
    primary: 'rgba(25, 140, 255, 0.05)',
    aqua: 'rgba(78, 212, 224, 0.05)',
    amber: 'rgba(255, 190, 77, 0.05)',
    low: 'rgba(255, 255, 255, 0.02)',
  }[intent];

  return (
    <Box 
      borderLeft 
      borderStyle="solid" 
      borderWidth="2px" 
      borderColor={borderColor} 
      paddingLeft={4} 
      paddingY={2} 
      bg={bgColor}
    >
      <Text 
        variant="low" 
        font="mono" 
        size="xs" 
        uppercase 
        letterSpacing="widest" 
        leading="relaxed"
      >
        {children}
      </Text>
    </Box>
  );
}