// @design-system: domain/ClubHero
'use client';

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { MDLogo } from '@/components/ui/icons/MDLogo';

export interface ClubHeroProps {
  className?: string;
}

/**
 * ClubHero — branded hero banner for the /club page.
 * Always rendered above CMS modules. Shows page title + tagline.
 *
 * @example
 * ```tsx
 * <ClubHero />
 * ```
 */
export function ClubHero({ className }: ClubHeroProps) {
  const t = useT('club');

  return (
    <header
      className={cn(
        'relative overflow-hidden',
        'bg-gradient-to-b from-[var(--color-brand-primary-50)] to-[var(--color-brand-primary-100)]',
        'px-6 py-8 lg:py-12',
        className,
      )}
    >
      <div className="mx-auto flex max-w-4xl items-center gap-4">
        <div className="flex-1">
          <h1 className="text-2xl font-bold leading-[var(--line-height-tight)] text-[var(--color-text-primary)] lg:text-3xl">
            {t('title')}
          </h1>
          <p className="mt-1 text-sm text-[var(--color-text-secondary)] lg:text-base">
            {t('hero_tagline')}
          </p>
        </div>
        <div aria-hidden="true" className="shrink-0 opacity-20">
          <MDLogo size={48} />
        </div>
      </div>
    </header>
  );
}