// pages/index.js
import Head from "next/head";
import React, { useState } from "react";
import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
import Image from "next/image";
import { getAllPictures } from "../lib/utils";
import { Img } from "@chakra-ui/react";

export async function getServerSideProps() {
  const data = await getAllPictures();
  console.log(data);
  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  console.log(data);
  const [photos, setPhotos] = useState(data);
  // TODO: Fallback with random flowers? fallbackSrc
  return (
    <div>
      <Head>
        <title>Philippe Bureau - Gallerie</title>
        <link rel="icon" href="/favicon.ico" />
        <Box overflow="hidden" bg="gray.100" minH="100vh">
          <Container>
            <Image src="/img/signal-2021-06-09-200337_001.jpeg" alt="me" width="64" height="64" />
            <Text
              color="gray.700"
              fontWeight="semibold"
              mb="1rem"
              textAlign="center"
              textDecoration="underline"
              fontSize={["5xl", "5xl", "6xl", "6xl"]}
            >
              Gallerie
            </Text>
          </Container>
          <Wrap px="2rem" spacing={"10px"} justify="center">
            {photos.map((path) => (
              <WrapItem
                key={"wrap-" + path}
                boxShadow="base"
                rounded="10px"
                overflow="hidden"
                m={3}
                bg="white"
                lineHeight="0"
                _hover={{ boxShadow: "dark-lg" }}
              >
                {/*<img
                  key={"img-" + path}
                  src={path}
                  height="200px"
                  width="80px"
                  color="gray.700"
                />*/}
                <Img
                  key={"img-" + path}
                  src={path}
                  height="180px"
                  width="120px"
                  objectFit="cover"
                  color="gray.700"
                />
              </WrapItem>
            ))}
          </Wrap>
        </Box>
      </Head>
    </div>
  );
}
