import { careers, type CareerItem } from "@/data/career";
import Link from "next/link";
import Image from "next/image";

const MoreCareer = () => {
  return (
    <section className="career-sec2 space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            Explore Jobs
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            Explore careers that make a difference Opportunities
          </h2>
        </div>
        <div className="row">
          {careers.slice(0, 2).map((career: CareerItem) => (
            <div className="col-lg-6 col-md-6" key={career.id}>
              <div
                data-aos={career.animation}
                data-aos-duration={900}
                data-aos-delay={300}
              >
                <div className="career-block">
                  <span className="sub-title">{career.type}</span>
                  <h2 className="title">{career.title}</h2>
                  <p>{career.description}</p>
                  <ul className="career-list">
                    <li>
                      <Image
                        src="/assets/images/icon/career1-1.svg"
                        alt="Salary icon"
                        width={20}
                        height={20}
                      />
                      {career.salary}
                    </li>
                    <li>
                      <Image
                        src="/assets/images/icon/career1-2.svg"
                        alt="Location icon"
                        width={20}
                        height={20}
                      />
                      {career.location}
                    </li>
                  </ul>
                  <Link href={career.href} className="btn-style1">
                    View Details
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow icon for View Details"
                        width={16}
                        height={16}
                      />
                    </span>
                  </Link>
                </div>
              </div>
            </div>
          ))}

          <div
            className="career-btn"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            <Link href="/career-details" className="btn-style1">
              View All Jobs
              <span>
                <Image
                  src="/assets/images/icon/arrow.svg"
                  alt="Arrow icon for View All Jobs"
                  width={16}
                  height={16}
                />
              </span>
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MoreCareer;