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;
}

export 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-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>

                {/* Job Header */}
                <div className="flex flex-col gap-6">
                    <div className="flex flex-col gap-4">
                        <h1 className="text-display-md font-semibold text-primary md:text-display-lg">
                            {job.title}
                        </h1>
                        
                        <div className="flex flex-wrap items-center gap-4 text-sm text-secondary">
                            {job.location && (
                                <div className="flex items-center gap-1.5">
                                    <MarkerPin02 className="h-4 w-4" />
                                    <span>{job.location}</span>
                                </div>
                            )}
                            {job.employment_type && (
                                <div className="flex items-center gap-1.5">
                                    <Briefcase01 className="h-4 w-4" />
                                    <span>{job.employment_type}</span>
                                </div>
                            )}
                            {job.salary_range && (
                                <div className="flex items-center gap-1.5">
                                    <CurrencyDollarCircle className="h-4 w-4" />
                                    <span>{job.salary_range}</span>
                                </div>
                            )}
                        </div>
                    </div>

                    <div>
                        <Button 
                            size="xl" 
                            color="primary"
                            onClick={() => {
                                const appForm = document.getElementById('application-form');
                                appForm?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                            }}
                        >
                            Apply Now
                        </Button>
                    </div>
                </div>
            </div>
        </section>
    );
};
