// @design-system: layout/Hero

/**
 * Hero - full-bleed page hero wrapper for desktop.
 *
 * On mobile the Hero is typically hidden (wrap in `hidden lg:block`) and
 * the existing mobile TopBar gradient fills that role.
 *
 * Size variants:
 * - `compact` - min-h-32 band with blue gradient, used on Profile/Settings/Purchases/Club
 * - `full`    - min-h-32 on mobile / 28rem on desktop, used for HeroCarousel
 *
 * @example
 * <div className="hidden lg:block">
 *   <Hero size="full">
 *     <HeroCarousel slides={featured} />
 *   </Hero>
 * </div>
 */

import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';

export interface HeroProps {
  children: ReactNode;
  /** Height variant. @default 'compact' */
  size?: 'compact' | 'full';
  className?: string;
}

export function Hero({ children, size = 'compact', className }: HeroProps) {
  return (
    <div
      className={cn(
        'relative w-full overflow-hidden',
        size === 'compact' && [
          'min-h-[var(--spacing-32)]',
          'from-brand-primary-800 to-brand-primary-600 bg-gradient-to-b',
        ],
        size === 'full' && ['min-h-[var(--spacing-32)] lg:min-h-[28rem]', 'bg-brand-primary-900'],
        className,
      )}
    >
      {children}
    </div>
  );
}