"use client";
import Link from "next/link";
import { useState, useEffect } from "react";
import { JobType } from "@/types/job";

const HomeJob = () => {
  const [job, setJob] = useState<JobType | null>(null);

  useEffect(() => {
    const fetchJob = async () => {
      const response = await fetch(`http://localhost:5000/jobs`);
      const data = await response.json();
      setJob(data);
    };

    fetchJob();
  }, []);

  return (
    <div className="page-job list">
      <div className="container-job">
        <h2 className="title">Tuyển dụng</h2>
        {job && job.list && job.list.length > 0 ? (
          <div className="list-job">
            {job.list.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;
