import type { Location } from '../../types/api/location';

interface LocationDetailHeroProps {
  location?: Location | null;
}

export const LocationDetailHero = ({
  location,
}: LocationDetailHeroProps) => {
  if (!location) return null;

  return (
    <section className="py-24 md:py-32">
      <div className="mx-auto max-w-4xl px-4 text-center md:px-8">
        <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl lg:text-7xl">
          {location.name}
        </h1>
        
        {location.city && location.state && (
          <p className="mt-6 text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
            {location.city}, {location.state}
          </p>
        )}
      </div>
    </section>
  );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('hero-location-detail', 'aman', LocationDetailHero);
