'use client';

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

import { Group, Title, Paper } from '@mantine/core';
import styles from './MobileHeader.module.css';

export function MobileHeader() {
  return (
    <Paper
      withBorder
      p="sm"
      radius={0}
      className={styles.header}
    >
      <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>
  );
}