import Layout from "@/components/layouts/Layout";
import "react-toastify/dist/ReactToastify.css";

interface Props {
  username: string;
  gridData: {
    name: string;
    cardColor: string;
    textColor: string;
    amount: string;
    icon: string;
  }[];
}

export default function dashboard(props: Props) {
  return (
    <Layout>
      <div className="container-fluid">
        <div className="d-sm-flex align-items-center justify-content-between mb-4">
          <h1 className="h3 mb-0 text-gray-800">Welcome {props.username}</h1>
        </div>
      </div>
    </Layout>
  );
}

export async function getServerSideProps() {
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_BASEURL}/api/dashboard`,
      { method: "GET", headers: { Authorization: `Bearer ` } },
    );

    if (!response.ok) {
      return {
        props: {
          username: "",
          gridData: [{}],
        },
      };
    }

    // API response handler
    const responseData = await response.json();
    const data = responseData.data;
    return { props: data };
  } catch (xhr) {
    return {
      props: {
        username: "",
        gridData: [{}],
      },
    };
  }
}