import { Breadcrumb } from '../elements';
import type { Service } from '../../types/api/service';

interface HeroServiceDetailProps {
  title?: string;
  description?: string;
  backgroundImage?: string;
  breadcrumbs?: Array<{ label: string; href: string }>;
  service?: Service | null;
}

export const ServiceDetailHero = ({
  title: titleProp,
  description: descriptionProp,
  breadcrumbs = [],
  service,
}: HeroServiceDetailProps) => {
  const title = service?.name || titleProp || '';
  const description = service?.summary || descriptionProp || '';
  
  return (
    <section className="relative">
      <div className="mx-auto max-w-container px-4 md:px-8">
        {breadcrumbs && breadcrumbs.length > 0 && (
          <div className="mb-8">
            <Breadcrumb items={breadcrumbs} />
          </div>
        )}
        
        <div className="text-center max-w-4xl mx-auto">
          <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl">
            {title}
          </h1>
          
          {description && (
            <p className="mt-6 font-display text-lg leading-relaxed text-tertiary md:text-xl">
              {description}
            </p>
          )}
        </div>
      </div>
    </section>
  );
};

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