import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';

interface OnboardingHeaderProps {
  title: string;
  subtitle: string;
  emoji: string;
}

export function OnboardingHeader({ title, subtitle, emoji }: OnboardingHeaderProps) {
  return (
    <Box textAlign="center" marginBottom={8}>
      <Surface
        variant="gradient-blue"
        rounded="xl"
        width="4rem"
        height="4rem"
        display="flex"
        alignItems="center"
        justifyContent="center"
        marginX="auto"
        marginBottom={4}
        border="1px solid var(--ui-color-intent-primary)"
      >
        <Text size="2xl">{emoji}</Text>
      </Surface>
      <Heading level={1} size="4xl" weight="bold" marginBottom={2}>{title}</Heading>
      <Text variant="low">{subtitle}</Text>
    </Box>
  );
}