import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { HelpCircle } from 'lucide-react';

interface OnboardingHelpPanelProps {
  title?: string;
  children: React.ReactNode;
}

/**
 * OnboardingHelpPanel
 * 
 * A semantic panel for providing contextual help or information during onboarding.
 * Usually placed in the sidebar.
 */
export function OnboardingHelpPanel({ title = 'Need Help?', children }: OnboardingHelpPanelProps) {
  return (
    <Surface
      variant="muted"
      rounded="xl"
      border
      padding={6}
      borderColor="border-charcoal-outline"
      bg="bg-deep-charcoal/30"
    >
      <Stack gap={4}>
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={HelpCircle} size={4} color="text-primary-blue" />
          <Text size="sm" weight="bold" color="text-white" uppercase letterSpacing="wider">
            {title}
          </Text>
        </Stack>
        
        <Text size="sm" color="text-gray-400">
          {children}
        </Text>
      </Stack>
    </Surface>
  );
}