import React, { ReactNode } from 'react';
import { Panel } from './Panel';
import { Stack } from './Stack';
import { Heading } from './Heading';
import { Text } from './Text';
import { LucideIcon } from 'lucide-react';
import { IconContainer } from './IconContainer';

import { Icon } from './Icon';

interface FeatureItemProps {
  title: string;
  description: string;
  icon: LucideIcon;
}

/**
 * FeatureItem - A semantic UI component for a single feature/pillar.
 * Allowed to use Stack primitive.
 */
export function FeatureItem({ title, description, icon }: FeatureItemProps) {
  return (
    <Panel variant="default" padding="lg">
      <Stack direction="col" gap={6}>
        <IconContainer>
          <Icon icon={icon} size={5} intent="primary" />
        </IconContainer>
        <Stack direction="col" gap={4}>
          <Heading level={3} weight="bold" uppercase>
            {title}
          </Heading>
          <Text size="md" variant="med" leading="relaxed" block>
            {description}
          </Text>
        </Stack>
      </Stack>
    </Panel>
  );
}