import React from 'react';

import { HStack } from '@astryxdesign/core/HStack';
import { Heading } from '@astryxdesign/core/Heading';

// Sticky page-header bar. Offset by the real AppShell nav height (not a
// hardcoded px guess) and a modest z-index so it never wins the stacking
// fight against the nav — see memory astryx-sticky-header-zindex-bug.
const TitleCard = ({ title, secondary, sx }) => (
  <div
    style={{
      position: 'sticky',
      top: 'var(--appshell-header-height, 0px)',
      zIndex: 100,
      background: 'var(--color-background-body)',
      width: '100%',
      padding: 8,
      ...sx
    }}
  >
    <HStack justify="space-between" wrap="wrap">
      <Heading level={3}>{title}</Heading>
      {secondary && secondary}
    </HStack>
  </div>
);

export default TitleCard;