"use client";

import { MapPin, Clock, Briefcase, CheckCircle2, ArrowLeft } from "lucide-react";
import Link from "next/link";

export default function JobDetails({ job }: any) {
  return (
    <section className="max-w-5xl mx-auto px-6 py-14">
      {/* Back button */}
      <Link 
        href="/careers"
        className="inline-flex items-center gap-2 text-slate-600 hover:text-[#428B4D] mb-8 transition-colors duration-200 group"
      >
        <ArrowLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform duration-200" />
        <span className="text-sm font-medium">Back to Careers</span>
      </Link>

      {/* Header with Description */}
      <div className="mb-8">
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">{job.title}</h1>
        <div className="flex flex-wrap gap-4 text-slate-600 mb-6">
          <span className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-200">
            <MapPin size={16} className="text-[#428B4D]" />
            {job.location}
          </span>
          <span className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-200">
            <Clock size={16} className="text-[#428B4D]" />
            {job.type}
          </span>
          <span className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-200">
            <Briefcase size={16} className="text-[#428B4D]" />
            {job.department}
          </span>
        </div>
        <p className="text-slate-700 text-lg leading-relaxed">{job.description}</p>
      </div>

      {/* Responsibilities */}
      <div className="bg-white/95 backdrop-blur-sm border border-slate-200 rounded-lg p-8 mb-6 shadow-md">
        <h2 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3">
          <div className="p-2 rounded-lg bg-gradient-to-br from-[#428B4D]/10 to-[#428B4D]/5 border border-[#428B4D]/20">
            <CheckCircle2 className="h-5 w-5 text-[#428B4D]" />
          </div>
          Responsibilities
        </h2>
        <ul className="space-y-3">
          {job.responsibilities.map((item: string, i: number) => (
            <li key={i} className="flex items-start gap-3 text-slate-700">
              <div className="mt-1.5 h-2 w-2 rounded-lg bg-[#428B4D] flex-shrink-0"></div>
              <span className="leading-relaxed">{item}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Requirements */}
      <div className="bg-white/95 backdrop-blur-sm border border-slate-200 rounded-lg p-8 mb-8 shadow-md">
        <h2 className="text-2xl font-bold text-slate-900 mb-6 flex items-center gap-3">
          <div className="p-2 rounded-lg bg-gradient-to-br from-[#428B4D]/10 to-[#428B4D]/5 border border-[#428B4D]/20">
            <CheckCircle2 className="h-5 w-5 text-[#428B4D]" />
          </div>
          Requirements
        </h2>
        <ul className="space-y-3">
          {job.requirements.map((item: string, i: number) => (
            <li key={i} className="flex items-start gap-3 text-slate-700">
              <div className="mt-1.5 h-2 w-2 rounded-lg bg-[#428B4D] flex-shrink-0"></div>
              <span className="leading-relaxed">{item}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Apply Button */}
      <div className="flex justify-center">
        <button className="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-[#428B4D] to-[#3a7a45] text-white rounded-lg text-lg font-semibold hover:shadow-xl hover:shadow-[#428B4D]/20 transition-all duration-300">
          Apply Now
          <ArrowLeft className="h-5 w-5 rotate-180 group-hover:translate-x-1 transition-transform duration-300" />
        </button>
      </div>
    </section>
  );
}