'use client';

import { Text } from '@/ui/Text';
import { CardStack } from '@/ui/CardStack';
import { FeatureList } from '@/ui/FeatureList';
import { FeatureQuote } from '@/ui/FeatureQuote';

interface HomeFeatureDescriptionProps {
  lead: string;
  items: string[];
  quote?: string;
  accentColor?: 'primary' | 'aqua' | 'amber' | 'gray';
}

/**
 * HomeFeatureDescription - A semantic component for feature descriptions on the home page.
 * Refactored to use semantic UI components.
 */
export function HomeFeatureDescription({
  lead,
  items,
  quote,
  accentColor = 'primary',
}: HomeFeatureDescriptionProps) {
  const intent = accentColor === 'gray' ? 'low' : accentColor;

  return (
    <CardStack gap={6}>
      <Text size="lg" variant="med" leading="relaxed">
        {lead}
      </Text>
      
      <FeatureList items={items} intent={intent} />
      
      {quote && (
        <FeatureQuote intent={intent}>
          {quote}
        </FeatureQuote>
      )}
    </CardStack>
  );
}