import { useEffect, useState } from "react"
import Search from "../components/Search"
import { Link } from "react-router-dom";
import ListingCard from '../components/ListingCard'
import Hero from "./Hero";

const Home = () => {
  const [offerListings, setOfferListings] = useState([]);
  const [saleListings, setSaleListings] = useState([]);
  const [rentListings, setRentListings] = useState([]);

  useEffect(() => {
    const fetchOfferListings = async () => {
      try{
        const res = await fetch('/server/listing/get?offer=true&limit=4');
        const data = await res.json();
        setOfferListings(data);
        fetchRentListings();

      }catch (error) {
        console.log(error)
      }
    };
    const fetchRentListings = async () => {
      try {
        const res = await fetch('/server/listing/get?type=rent&limit=4');
        const data = await res.json();
        setRentListings(data);
        fetchSaleListings();

      } catch (error) {
        console.log(error)
      }
    };
    const fetchSaleListings = async () => {
      try {
        const res = await fetch('/server/listing/get?type=sale&limit=4');
        const data = await res.json();
        setSaleListings(data);

      } catch (error) {
        console.log(error)
      }
    };
    fetchOfferListings();
  }, []);


  return (
    <>
    <div className="relative flex items-center justify-center h-[70vh]">
      <div className="bg-hero-pattern absolute z-10 w-full h-[70vh] bg-no-repeat bg-cover bg-center"></div>
      <div className="relative z-30 text-white text-center flex flex-col justify-center items-center">
        <h1 className="uppercase tracking-tight text-3xl font-serif mb-4 text-shadow-lg shadow-black sm:text-5xl">Chicago properties for sale</h1>
        <p className="text-shadow-DEFAULT shadow-black ">Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br />Alias dolorem error atque aut, asperiores et tempore iste quaerat pariatur maxime?</p>
        <Search/> 
      </div>
    </div>
    <div className="max-w-6xl mx-auto p-10 flex flex-col gap-4">
      {offerListings && offerListings.length > 0 && (
        <div className=''>
          <div className='my-3'>
            <h2 className='text-2xl font-semibold text-blue-900'>Recent offers</h2>
            <Link className='text-sm font-semibold hover:underline' to={'/search?offer=true'}>Show more offers</Link>
          </div>
          <div className='flex flex-wrap gap-4'>
            {offerListings.map((listing) => (
              <ListingCard listing={listing} key={listing._id} />
            ))}
          </div>
        </div>
      )}
      {rentListings && rentListings.length > 0 && (
        <div className=''>
          <div className='my-3'>
            <h2 className='text-2xl font-semibold text-blue-900'>Recent places for rent</h2>
            <Link className='text-sm font-semibold hover:underline' to={'/search?type=rent'}>Show more places for rent</Link>
          </div>
          <div className='flex flex-wrap gap-4'>
            {rentListings.map((listing) => (
              <ListingCard listing={listing} key={listing._id} />
            ))}
          </div>
        </div>
      )}
      {saleListings && saleListings.length > 0 && (
        <div className=''>
          <div className='my-3'>
            <h2 className='text-2xl font-semibold text-blue-900'>Recent places for sale</h2>
            <Link className='text-sm font-semibold hover:underline' to={'/search?type=sale'}>Show more places for sale</Link>
          </div>
          <div className='flex flex-wrap gap-4'>
            {saleListings.map((listing) => (
              <ListingCard listing={listing} key={listing._id} />
            ))}
          </div>
        </div>
      )}
    </div>
    <Hero/>
  </>
  )
}

export default Home