import Image from 'next/image';
import Link from 'next/link';
import React from 'react'
import { GoArrowUpRight } from "react-icons/go";

export interface JobDetailProps {
  bannerSrc: string;
  bannerAlt: string;
  jobTitle: string;
  experience: string;
  overview: string;
  responsibilities: string[];
  candidateProfile: string[];
  whatWeOffer: string[];
  applyHref: string;
}

const JobDetail = ({
  bannerSrc,
  bannerAlt,
  jobTitle,
  experience,
  overview,
  responsibilities,
  candidateProfile,
  whatWeOffer,
  applyHref,
}: JobDetailProps) => {
  return (
    <div className='py-10 md:py-20'>
      <div className='max-w-[1200px] mx-auto px-3'>
        <div className='mb-12'>
          <Image src={bannerSrc} width={1200} height={600} className='w-full' alt={bannerAlt} />
        </div>
        <div>
          <h3 className='text-[20px] md:text-[32px] text-[#E77025] font-bold mb-5'>{`Career in ${jobTitle} at Fruxinfo`}</h3>

          <p className='text-[16px] text-[#5D5D5D] mb-4'><b className='text-[#000]'>Job Title:-</b>{` ${jobTitle}`}</p>
          <p className='text-[16px] text-[#5D5D5D] mb-4'><b className='text-[#000]'>Experience:-</b> <span className='text-[#E77025] text-[20px] font-bold'>{experience}</span> Years</p>

          <p className='text-[18px] text-[#5D5D5D] mb-3'><b className='text-[#000]'>Job Overview</b></p>

          <p className='text-[16px] text-[#5D5D5D] mb-3'>{overview}</p>

          <p className='text-[18px] text-[#5D5D5D] mb-3'><b className='text-[#000]'>Key Responsibilities:</b></p>
          <ul className='mb-5'>
            {responsibilities.map((item, index) => (
              <li key={index} className='text-[16px] text-[#5D5D5D] list-disc ms-3'>{item}</li>
            ))}
          </ul>

          <p className='text-[18px] text-[#5D5D5D] mb-3'><b className='text-[#000]'>Candidate Profile:</b></p>
          <ul className='mb-5'>
            {candidateProfile.map((item, index) => (
              <li key={index} className='text-[16px] text-[#5D5D5D] list-disc ms-3'>{item}</li>
            ))}
          </ul>

          <p className='text-[18px] text-[#5D5D5D] mb-3'><b className='text-[#000]'>What We Offer:</b></p>
          <ul>
            {whatWeOffer.map((item, index) => (
              <li key={index} className='text-[16px] text-[#5D5D5D] list-disc ms-3'>{item}</li>
            ))}
          </ul>

         <div className="flex mt-10">
          <Link
            href={applyHref}
            className="Custome_Orange_button flex items-center justify-center gap-3"
          >
            APPLY NOW <GoArrowUpRight className="h-[20px] w-[20px]" />
          </Link>
        </div>

        </div>
      </div>
    </div>
  )
}

export default JobDetail