import React, { FC } from "react";
import { fetchGuitars } from "../lib/strapi";
import { GetServerSideProps } from "next";
import { Guitar, GuitarResponse } from "../type/guitars";

// ===========================
// getServerSidePropsのpropsに設定したデータを引数で受け取れる
// ==========================
const Ssr: FC<GuitarResponse> = ({ guitars }) => {
  return (
    <div>
      {guitars.map((guitar: Guitar) => {
        return <div key={guitar.id}>{guitar.attributes.name}</div>;
      })}
    </div>
  );
};

// ===============================
// サーバサイドレンダリング時にはgetServerSidePropsの中で
// 表示データを作成する
// ===============================
export const getServerSideProps: GetServerSideProps = async () => {
  const guitars = await fetchGuitars();
  return {
    props: {
      guitars,
    },
  };
};

export default Ssr;