import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

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

/**
 * OnboardingStepPanel
 * 
 * A semantic container for a single onboarding step.
 * Provides a consistent header and surface.
 */
export function OnboardingStepPanel({ title, description, children }: OnboardingStepPanelProps) {
  const testId = title.toLowerCase().includes('personal') ? 'step-1-personal-info' : 'step-2-avatar';
  return (
    <Stack gap={6} data-testid={testId}>
      <Stack gap={1}>
        <Text as="h2" size="2xl" weight="bold" color="text-white" letterSpacing="tight">
          {title}
        </Text>
        {description && (
          <Text size="sm" color="text-gray-400">
            {description}
          </Text>
        )}
      </Stack>

      <Panel
        variant="dark"
        rounded="xl"
        border
        padding={8}
        borderColor="border-charcoal-outline"
        bg="bg-deep-charcoal/50"
      >
        {children}
      </Panel>
    </Stack>
  );
}