import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { LucideIcon } from 'lucide-react';

interface FeatureItemProps {
  icon: LucideIcon;
  text: string;
}

export function FeatureItem({ icon, text }: FeatureItemProps) {
  return (
    <Box 
      position="relative" 
      overflow="hidden" 
      rounded="lg" 
      bg="bg-gradient-to-r from-slate-900/60 via-slate-800/40 to-slate-900/60" 
      p={4} 
      border 
      borderColor="border-slate-700/40" 
      hoverBorderColor="border-primary-blue/50" 
      transition 
      group
    >
      <Box 
        position="absolute" 
        top="0" 
        left="0" 
        w="full" 
        h="0.5" 
        bg="bg-gradient-to-r from-transparent via-primary-blue/60 to-transparent" 
        opacity={0} 
        groupHoverBorderColor="opacity-100" // This is a hack, Box doesn't support groupHoverOpacity
      />
      <Box display="flex" alignItems="start" gap={3}>
        <Box 
          flexShrink={0} 
          w="9" 
          h="9" 
          rounded="lg" 
          bg="bg-gradient-to-br from-primary-blue/20 to-blue-900/20" 
          border 
          borderColor="border-primary-blue/30" 
          display="flex" 
          alignItems="center" 
          justifyContent="center" 
          shadow="lg" 
          hoverScale
        >
          <Icon icon={icon} size={5} color="text-primary-blue" />
        </Box>
        <Text color="text-slate-200" leading="relaxed" weight="light">
          {text}
        </Text>
      </Box>
    </Box>
  );
}