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

const Career = () => {
  return (
    <>
      {careers.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>
    </>
  );
};

export default Career;