"use client";
import CardWidget from "@/components/card-widget";
import SearchVillas from "@/components/search";
import {LoaderCircle} from "lucide-react";
import {useState, useTransition} from "react";

interface Props {
  dataVilla: any;
}

export default function Content({dataVilla}: Props) {
  const [isSuccess, setIsSuccess] = useState(false);
  const [dataAvailability, setDataAvailability] = useState<any>([]);
  const [dataBooking, setDataBooking] = useState<any>({});

  return (
    <>
      <SearchVillas
        setDataAvailability={setDataAvailability}
        setDataBooking={setDataBooking}
        setIsSuccess={setIsSuccess}
      />
      <div className="">
        <div className="grid grid-cols-1 lg:grid-cols-3 2xl:grid-cols-4 gap-10 lg:gap-[1rem]">
          {isSuccess ? (
            <CardWidget
              dataVilla={dataVilla}
              dataAvailability={dataAvailability}
              dataBooking={dataBooking}
            />
          ) : (
            <CardWidget dataVilla={dataVilla} />
          )}
        </div>
      </div>
    </>
  );
}