import { LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Surface } from './Surface';
import { Text } from './Text';

export interface LandingItemProps {
  title: string;
  description: string;
  icon: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
}

export const LandingItem = ({ 
  title, 
  description, 
  icon, 
  intent = 'primary' 
}: LandingItemProps) => {
  return (
    <Surface variant="muted" rounded="xl" padding={6} style={{ border: '1px solid var(--ui-color-border-default)' }}>
      <Box display="flex" flexDirection="col" gap={4}>
        <Box padding={3} rounded="lg" bg="var(--ui-color-bg-surface-muted)" width="fit-content">
          <Icon icon={icon} size={6} intent={intent} />
        </Box>
        <Box>
          <Text weight="bold" variant="high" size="lg" block>
            {title}
          </Text>
          <Text variant="low" leading="relaxed">
            {description}
          </Text>
        </Box>
      </Box>
    </Surface>
  );
};