import Image from "next/image";
import styles from "../styles/Home.module.css";
import { Card, Seo } from "../src/components";

export default function Home({ data }) {
  const photo =
    "https://cdn.statically.io/gh/Marineux/faker-data/main/assets/anim.jpg";
  return (
    <div className='px-8'>
      <Seo />

      <main className='flex min-h-screen flex-1 flex-col items-center py-16'>
        <h1 className='text-6xl'>
          Welcome to{" "}
          <a className='text-sky-500' href='https://nextjs.org'>
            Next.js!
          </a>
        </h1>

        <p className='my-8 text-2xl'>
          Get started by editing{" "}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className='py-4'>
          <Image src={photo} alt='photo' width={100} height={100} />
        </div>

        <div className='flex max-w-4xl flex-wrap items-center justify-center'>
          <Card data={data} />
        </div>
      </main>

      <footer className='flex flex-1 items-center justify-center  py-8'>
        <a
          className='italic  text-gray-400'
          href='https://github.com/Marineux'
          target='_blank'
          rel='noopener noreferrer'
        >
          By Marineux
        </a>
      </footer>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch(
    "https://my-json-server.typicode.com/Marineux/faker-data/data"
  );
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}
