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

interface OnboardingStepHeaderProps {
  title: string;
  description?: string;
}

export function OnboardingStepHeader({ title, description }: OnboardingStepHeaderProps) {
  return (
    <Stack gap={1} mb={6}>
      <Text size="2xl" color="text-white" weight="bold" className="tracking-tight" block>
        {title}
      </Text>
      {description && (
        <Text size="sm" color="text-gray-400" block>
          {description}
        </Text>
      )}
    </Stack>
  );
}