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

export function FeatureItem({ text }: { text: string }) {
  return (
    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/40" borderColor="border-gray/50" className="group hover:border-primary-accent/30 transition-colors">
      <Stack direction="row" align="center" gap={4}>
        <Box w="1" h="4" bg="primary-accent" className="group-hover:h-6 transition-all" />
        <Text color="text-gray-300" leading="relaxed" weight="normal" size="sm" className="tracking-wide">
          {text}
        </Text>
      </Stack>
    </Surface>
  );
}

export function ResultItem({ text, color }: { text: string, color: string }) {
  return (
    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/40" borderColor="border-gray/50" className="group hover:border-primary-accent/30 transition-colors">
      <Stack direction="row" align="center" gap={4}>
        <Box w="1" h="4" style={{ backgroundColor: color }} className="group-hover:h-6 transition-all" />
        <Text color="text-gray-300" leading="relaxed" weight="normal" size="sm" className="tracking-wide">
          {text}
        </Text>
      </Stack>
    </Surface>
  );
}

export function StepItem({ step, text }: { step: number, text: string }) {
  return (
    <Surface variant="muted" rounded="none" border padding={4} bg="panel-gray/40" borderColor="border-gray/50" className="group hover:border-primary-accent/30 transition-colors">
      <Stack direction="row" align="center" gap={4}>
        <Box w="8" h="8" display="flex" center border borderColor="border-gray" className="group-hover:border-primary-accent/50 transition-colors">
          <Text weight="bold" size="xs" color="text-primary-accent" font="mono">{step.toString().padStart(2, '0')}</Text>
        </Box>
        <Text color="text-gray-300" leading="relaxed" weight="normal" size="sm" className="tracking-wide">
          {text}
        </Text>
      </Stack>
    </Surface>
  );
}
