"use client";

import { useEffect, useState } from "react";

import Activities from "@/components/layoutPanel/userDetail/Activities";
import AmountOfIncome from "./amountOfIncome";
import Cards from "./Cards";
import List from "./list";

function DashboardPage({ data }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="flex mt-[4px] flex-col gap-[20px] opacity-page">
      <Cards data={data} loading={loading} />
      <List data={data} loading={loading} />
      <AmountOfIncome data={data} loading={loading} />
      <div className="flex xl:hidden">
        <Activities data={data} loading={loading} />
      </div>
    </div>
  );
}

export default DashboardPage;