page.tsx

"use client";

import Footer from "@/components/Footer";
import { okidoFinanceAbi, okidoFinance } from "@/constants";
import Image from "next/image";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { useReadContract } from "wagmi";
import PropertyCard from "@/components/PropertyCard";
import AddPropertyModal from "@/components/AddPropertyModal";

export default function Home() {
  const [properties, setProperties] = useState<any>([]);

  const { data: propertyData } = useReadContract({
    abi: okidoFinanceAbi,
    address: okidoFinance,
    functionName: "listProperties",
  });

  useEffect(() => {
    if (propertyData) {
      setProperties(propertyData);
    }
  }, [propertyData]);

  return (
    <main className="flex min-h-screen flex-col bg-[#fff]">
      <div
        className="flex flex-col h-1/3 items-center px-6"
        style={{
          backgroundImage: "url('/mBg.svg')",
          backgroundSize: "contain",
          backgroundPosition: "top",
          backgroundRepeat: "no-repeat",
          width: "100%",
          height: "70vh",
        }}
      >
        <div className="mt-28">
          <div className="flex flex-col items-center justify-center text-[#14A800]">
            <h3 className="text-sm sm:text-xl md:text-2xl font-light">Morph</h3>
            <h1 className=" text-5xl sm:text-5xl md:text-7xl font-bold">
              OKIDO FINANCE
            </h1>

            <Image
              className="-mt-12"
              alt="logo"
              src="/koala.svg"
              width={122}
              height={32}
            />

            <div className="flex justify-center items-center my-12">
              <AddPropertyModal>
                <Button
                  size="lg"
                  className="bg-[#14A800] text-bold text-white px-10 py-6 rounded-full"
                >
                  Add property
                </Button>
              </AddPropertyModal>
            </div>
          </div>
        </div>
      </div>
      <div className="bg-[#14A800]/10 w-full flex-1 py-8 overflow-hidden">
        <div className="px-4 mt-12 md:px-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 overflow-y-auto h-full">
          {properties.length > 0 ? (
            properties
              .toReversed()
              .map((property: any) => (
                <PropertyCard key={property.tokenId} property={property} />
              ))
          ) : (
            <div>
              <h1 className="text-2xl font-semibold">No property available</h1>
            </div>
          )}
        </div>
      </div>
      <Footer />
    </main>
  );
}