"use client";
import Link from "next/link";
import { useState, useEffect } from "react";
import { ListJobDataType } from "@/types/job";
import { fetchListJobs } from "@/api/apiService";

const HomeJob = () => {
  const [ListJob, setListJob] = useState<ListJobDataType | null>(null);

  useEffect(() => {
    const getListJob = async () => {
      const data = await fetchListJobs();
      setListJob(data.list);
    };

    getListJob();
  }, []);

  return (
    <div className="page-job list">
      <div className="container-job">
        <h2 className="title">Tuyển dụng</h2>
        {ListJob && Array.isArray(ListJob) && ListJob.length > 0 ? (
          <div className="list-job">
            {ListJob.map((item) => (
              <div className="item-job" key={item.id}>
                <div className="job-left">
                  <Link href={`${item.url}`} className="name line-clamp-1">
                    {item.title}
                  </Link>
                  <div className="time">{item.end_date}</div>
                </div>
                <div className="job-right flex items-center">
                  <div className="localhost">{item.location}</div>
                  <Link href={`${item.url}`} className="more">
                    Ứng tuyển ngay <i className="fa-solid fa-angle-right"></i>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center text-2xl py-[50px] font-bold italic">
            Không có công việc nào.
          </div>
        )}
      </div>
    </div>
  );
};

export default HomeJob;
