'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';

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 HTML and Tailwind.
 */
export function HomeFeatureDescription({
  lead,
  items,
  quote,
  accentColor = 'primary',
}: HomeFeatureDescriptionProps) {
  const borderColor = {
    primary: 'primary-accent',
    aqua: 'telemetry-aqua',
    amber: 'warning-amber',
    gray: 'border-gray',
  }[accentColor];

  const bgColor = {
    primary: 'primary-accent/5',
    aqua: 'telemetry-aqua/5',
    amber: 'warning-amber/5',
    gray: 'white/5',
  }[accentColor];

  return (
    <Stack gap={6}>
      <Text size="lg" color="text-gray-400" weight="medium" leading="relaxed">
        {lead}
      </Text>
      <Box as="ul" display="flex" flexDirection="col" gap={2}>
        {items.map((item, index) => (
          <Box as="li" key={index} display="flex" alignItems="start" gap={2}>
            <Text color="text-primary-accent">•</Text>
            <Text size="sm" color="text-gray-500">{item}</Text>
          </Box>
        ))}
      </Box>
      {quote && (
        <Box borderLeft borderStyle="solid" borderWidth="2px" borderColor={borderColor} pl={4} py={1} bg={bgColor}>
          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest" leading="relaxed">
            {quote}
          </Text>
        </Box>
      )}
    </Stack>
  );
}