// @design-system: domain/BusinessHeader

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { ClubBadge } from '../ClubBadge';

/** Props for BusinessHeader */
export interface BusinessHeaderProps {
  /** Business display name. */
  businessName: string;
  /** Public business description. */
  description?: string;
  /** Business hours string, e.g. "08:00-22:00". */
  hours?: string;
  /** When provided, shows the "joined via deal" strip. */
  joinedViaDeal?: boolean;
  /** Whether the current user is a club member of this business. */
  isClubMember?: boolean;
  /** Optional slot for club badge or additional controls. */
  clubSlot?: ReactNode;
  /** Additional class names. */
  className?: string;
}

/**
 * BusinessHeader - blue block with business name (h1) + hours + club badge slot.
 * Used at the top of the BusinessPage (FDS §4.6).
 *
 * @example
 * ```tsx
 * <BusinessHeader
 *   businessName="Coffee Bean"
 *   hours="08:00-22:00"
 *   joinedViaDeal
 *   isClubMember={user.isMember}
 * />
 * ```
 */
export function BusinessHeader({
  businessName,
  description,
  hours,
  joinedViaDeal,
  isClubMember,
  clubSlot,
  className,
}: BusinessHeaderProps) {
  const t = useT('domain_business_header');

  return (
    <header className={cn('bg-brand-primary-700 text-brand-on-primary px-4 py-5', className)}>
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <h1 className="text-brand-on-primary text-xl leading-tight font-bold">{businessName}</h1>
          {description && (
            <p className="text-brand-primary-100 mt-2 text-sm leading-relaxed">{description}</p>
          )}
          {hours && (
            <p className="text-brand-primary-200 mt-1 text-sm">
              {t('hours_prefix')} {hours}
            </p>
          )}
          {joinedViaDeal && (
            <p className="text-brand-primary-300 mt-1 text-xs">{t('joined_via_deal')}</p>
          )}
        </div>
        <div className="shrink-0">
          {clubSlot ?? (isClubMember !== undefined && <ClubBadge isMember={isClubMember} />)}
        </div>
      </div>
    </header>
  );
}