'use client';

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

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

export function MobileHeader() {
  return (
    <Paper
      withBorder
      p="md"
      radius={0}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        zIndex: 100,
        borderBottom: '1px solid #dee2e6',
      }}
    >
      <Group gap="sm" align="center">
        <Image
          src="/logo.svg"
          alt="Ponderants logo"
          w={56}
          h={56}
          style={{ flexShrink: 0 }}
        />
        <Text fw={700} size="xl">
          Ponderants
        </Text>
      </Group>
    </Paper>
  );
}