'use client';

/**
 * Mobile Header
 *
 * Fixed header for mobile devices showing the Ponderants logo.
 */

import { Group, Image, Text, Paper, Box } from '@mantine/core';

export function MobileHeader() {
  return (
    <Paper
      withBorder
      p="sm"
      radius={0}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 100,
        borderBottom: '1px solid #373A40',
      }}
    >
      <Group gap="sm" align="center">
        <Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Image
            src="/logo.svg"
            alt="Ponderants logo"
            style={{ width: '100%', height: '100%', transform: 'scale(3.5)' }}
          />
        </Box>
        <Text fw={700} size="lg">
          Ponderants
        </Text>
      </Group>
    </Paper>
  );
}
