import { ChevronLeft } from "@untitledui/icons";
import { Button } from '../elements';
import type { Location } from '../../types/api/location';
import type { CompanyInformation } from '../../types/api/company-information';
import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';

interface LocationDetailHeroProps {
    location?: Location | null;
    companyInformation?: CompanyInformation | null;
    /** Optional route override for the CTA. When not set, uses primary CTA URL (booking or /contact) from company info. */
    ctaHrefOverride?: string;
}

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

    const resolved = companyInformation ? resolveCtaUrls(companyInformation) : null;
    const ctaHref = ctaHrefOverride ?? resolved?.primaryHref ?? '/contact';

    const breadcrumb = {
        backHref: "/locations",
        backLabel: "Locations",
        currentLabel: location.name || "Location",
    };
    
    const headline = location.name || "Location";
    const subhead = location.description_markdown?.replace(/[#*\[\]()]/g, '').trim() || "";
    const ctaText = "Book Now";
    
    return (
        <section className="bg-primary py-4 md:py-6">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {breadcrumb && (
                    <div className="mb-8">
                        <nav aria-label="Breadcrumb">
                            <div className="flex items-center gap-2">
                                <Button 
                                    color="link-gray" 
                                    size="md" 
                                    href={breadcrumb.backHref}
                                    iconLeading={ChevronLeft}
                                    className="text-tertiary hover:text-primary"
                                >
                                    {breadcrumb.backLabel}
                                </Button>
                                <span className="text-tertiary">/</span>
                                <span className="text-primary font-medium">{breadcrumb.currentLabel}</span>
                            </div>
                        </nav>
                    </div>
                )}
                
                <div className="mx-auto flex w-full max-w-3xl flex-col items-center text-center">
                    <h1 className="text-display-md font-semibold text-primary md:text-display-lg">
                        {headline}
                    </h1>

                    <p className="mt-4 text-lg text-tertiary md:mt-6 md:text-xl">
                        {subhead}
                    </p>

                    <div className="mt-8">
                        <Button
                            size="xl"
                            href={ctaHref}
                            target={isExternalCtaUrl(ctaHref) ? '_blank' : undefined}
                            rel={isExternalCtaUrl(ctaHref) ? 'noopener noreferrer' : undefined}
                        >
                            {ctaText}
                        </Button>
                    </div>
                </div>
            </div>
        </section>
    );
};
