import { ChevronLeft, MarkerPin02, Briefcase01, CurrencyDollarCircle } from "@untitledui/icons";
import { Button } from '../elements';
import type { JobPosting } from '../../types/api/job-posting';

interface JobDetailHeroProps {
    job?: JobPosting | null;
}

const JobDetailHero = ({
    job,
}: JobDetailHeroProps) => {
    if (!job) return null;

    const breadcrumb = {
        backHref: "/about/careers",
        backLabel: "Careers",
        currentLabel: job.title || "Job",
    };

    return (
        <section className="bg-primary py-8 md:py-12">
            <div className="mx-auto max-w-container px-4 md:px-8">
                {/* Breadcrumb */}
                <nav aria-label="Breadcrumb" className="mb-6">
                    <div className="flex items-center gap-2 text-sm">
                        <Button 
                            color="link-gray" 
                            size="sm" 
                            href={breadcrumb.backHref}
                            iconLeading={ChevronLeft}
                            className="font-body text-secondary hover:text-primary"
                        >
                            {breadcrumb.backLabel}
                        </Button>
                        <span className="font-body text-secondary">/</span>
                        <span className="font-body text-primary">{breadcrumb.currentLabel}</span>
                    </div>
                </nav>

                {/* Job Header */}
                <div className="flex flex-col gap-8">
                    <div>
                        <h1 className="font-display text-5xl font-normal text-fg-primary md:text-6xl">
                            {job.title}
                        </h1>
                        
                        <div className="mt-6 flex flex-wrap items-center gap-6 font-body text-base text-secondary">
                            {job.location && (
                                <div className="flex items-center gap-2">
                                    <MarkerPin02 className="h-5 w-5" />
                                    <span>{job.location}</span>
                                </div>
                            )}
                            {job.employment_type && (
                                <div className="flex items-center gap-2">
                                    <Briefcase01 className="h-5 w-5" />
                                    <span className="uppercase tracking-wide">{job.employment_type}</span>
                                </div>
                            )}
                            {job.salary_range && (
                                <div className="flex items-center gap-2">
                                    <CurrencyDollarCircle className="h-5 w-5" />
                                    <span>{job.salary_range}</span>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default JobDetailHero;

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