import Link from "next/link";
import Layout from "@/app/layout";
import { useEffect, useState } from "react";
import { JobData } from "@/data/job";

const Home = () => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true); // Chỉ set khi component đã mount trên client
  }, []);

  if (!isClient) {
    return null; // Tránh render trên server
  }

  return (
    <Layout>
      <div className="page-job list">
        <div className="container-job">
          <h2 className="title">Tuyển dụng</h2>
          <div className="list-job">
            {JobData.list.map((job) => (
              <div className="item-job" key={job.id}>
                <div className="job-left">
                  <Link href="/job/detail" className="name line-clamp-1">
                    {job.title}
                  </Link>
                  <div className="time">{job.end_date}</div>
                </div>
                <div className="job-right flex items-center">
                  <div className="localhost">{job.location}</div>
                  <Link href="/job/detail" className="more">
                    Ứng tuyển ngay <i className="fa-solid fa-angle-right"></i>
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Home;
