"use client";

import { useParams } from "next/navigation";
import Header from "@/components/shared/layout/header/Header";
import JobSingle from "@/components/pages/career/JobSingle";
import Footer from "@/components/shared/layout/footer/Footer";
import CareerScrollProgressButton from "@/components/pages/career/CareerScrollProgressButton";
import CareerInitAnimations from "@/components/pages/career/CareerInitAnimations";
import { useJob } from "@/lib/hooks/useCareer";

const JobPage = () => {
  const params = useParams();
  const slug = params?.slug as string;
  const { job, loading, error } = useJob(slug);

  if (loading) {
    return (
      <div className="tp-app">
        <Header />
        <main>
          <section className="pt-120 pb-120">
            <div className="container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2>Loading job details...</h2>
                </div>
              </div>
            </div>
          </section>
        </main>
        <Footer />
        <CareerScrollProgressButton />
        <CareerInitAnimations />
      </div>
    );
  }

  if (error || !job) {
    return (
      <div className="tp-app">
        <Header />
        <main>
          <section className="pt-120 pb-120">
            <div className="container">
              <div className="row">
                <div className="col-12 text-center">
                  <h2 className="text-danger">Job Not Found</h2>
                  <p className="mt-24">
                    The job position you are looking for does not exist or is no longer available.
                  </p>
                  <a href="/career" className="btn mt-40">
                    View All Positions
                  </a>
                </div>
              </div>
            </div>
          </section>
        </main>
        <Footer />
        <CareerScrollProgressButton />
        <CareerInitAnimations />
      </div>
    );
  }

  return (
    <div className="tp-app">
      <Header />
      <main>
        <JobSingle job={job} />
      </main>
      <Footer />
      <CareerScrollProgressButton />
      <CareerInitAnimations />
    </div>
  );
};

export default JobPage;