import { Header } from 'cloudrite';

// Header is `position: fixed`, so it contributes no height to its container — an
// unwrapped render collapses the preview root to zero and the card comes up
// empty. The sized, `relative` shell below gives it something to pin to and
// shows it over page content the way it actually appears.
const still = `*,*::before,*::after{
  transition-duration:0s !important;transition-delay:0s !important;
  animation-duration:0s !important;animation-delay:0s !important;
}`;

export const Default = () => (
  <div className="relative h-64 overflow-hidden bg-background text-foreground">
    <style>{still}</style>
    <Header />
    <div className="px-6 pt-28 text-sm text-muted-foreground">
      Page content scrolls beneath the fixed header.
    </div>
  </div>
);