import { ChevronLeft } from "@untitledui/icons";
import { Button } from '../elements';
import type { Service } from '../../types/api/service';

interface ServiceDetailHeroProps {
    service?: Service | null;
}

export const ServiceDetailHero = ({
    service,
}: ServiceDetailHeroProps) => {
    if (!service) return null;

    // Build breadcrumb from service data
    const breadcrumb = {
        backHref: "/services",
        backLabel: "Services",
        currentLabel: service.name || "Service",
    };

    return (
        <section className="bg-primary py-4 md:py-6">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {/* Breadcrumb - top left aligned */}
                <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>
        </section>
    );
};
