'use client';

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

import { Group, Title, Paper } 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="md" align="center" wrap="nowrap">
        <img
          src="/logo.svg"
          alt="Ponderants logo"
          width={32}
          height={32}
          style={{ flexShrink: 0, display: 'block' }}
        />
        <Title order={3} style={{ margin: 0 }}>
          Ponderants
        </Title>
      </Group>
    </Paper>
  );
}