Centred Container

---
//    VELOCITY COMPONENT · theming
// 
//    Colours here are Tailwind `primary-*` / `accent-*`, which resolve through
//    the Velocity preset. Out of the box they are a neutral indigo — NOT the
//    Aidxn brand — so this drops into your project without dragging our look in.
// 
//    ⚡ NOT USING VELOCITY? Run this once, in your project root:
// 
//          velocityx theme
// 
//    It writes velocity-preset.cjs + velocity-theme.css. Add the preset to your
//    tailwind.config, import the css, then set your whole brand in ONE place:
// 
//          :root {
//            --vx-brand: custom;
//            --vx-primary-600: 220 38 38;   <- your action colour
//            --vx-primary-700: 185 28 28;
//          }
// 
//    ⚠️  Raw RGB channels, space separated — NOT hex. `#DC2626` here silently
//        breaks every /opacity variant in the library (bg-primary-600/20 etc).
// 
//    Prefer not to install anything? Find-and-replace `primary-` with your own
//    scale name. Nothing else in this file depends on Velocity.
/**
 * CenterBox — The genuinely reliable centring primitive, both axes, with a
 * method you pick explicitly instead of guessing:
 *
 *   method="flex"  → flex + items-center + justify-center. Works whether or
 *                    not the content's own height is known — flex doesn't
 *                    care. Best general default.
 *   method="grid"  → grid + place-items-center. Equivalent result, useful
 *                    when you also want the same wrapper to host a
 *                    grid-based overlay (e.g. a centred child plus an
 *                    absolutely-positioned badge via a second grid cell).
 *
 *   knownHeight    → when the container's height IS known/fixed, pass it
 *                    (any CSS length, e.g. "100vh", "480px", "60dvh") and
 *                    it's applied directly — no padding hacks, no min-h
 *                    guesswork.
 *   minHeight      → when the height is NOT known ahead of time (content
 *                    can vary), use minHeight instead so the box grows
 *                    with content but never collapses below a floor.
 *
 * Pass neither knownHeight nor minHeight for a box that centres its
 * children but takes exactly the height its content needs (e.g. centring
 * inline content inside an existing section).
 */
export interface Props {
  as?: 'div' | 'section';
  method?: 'flex' | 'grid';
  knownHeight?: string;
  minHeight?: string;
  className?: string;
}

const {
  as: As = 'div',
  method = 'flex',
  knownHeight,
  minHeight,
  className = '',
} = Astro.props;

const methodClass = method === 'grid' ? 'grid place-items-center' : 'flex items-center justify-center';

const style = [
  knownHeight ? `height:${knownHeight};` : '',
  !knownHeight && minHeight ? `min-height:${minHeight};` : '',
].join('');
---

<As class:list={[methodClass, 'w-full', className]} style={style || undefined}>
  <slot />
</As>