import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Index.module.sass";
import Avatar from "../public/assets/Avatar.png";
import constants from "lib/constants";
import Icon from "components/Icon";
import Head from "components/Head";
import Socials from "lib/socials";
import Credits from "components/Credits";

const Index = ({ credits }) => {
  let AvatarSize = 200;
  return (
    <>
      <Head />
      <div className={styles.center}>
        <Image
          className={styles.avatar}
          src={Avatar}
          width={AvatarSize}
          height={AvatarSize}
        />
        <h1 className={styles.name}>HEIKADOG</h1>
        <p className={styles.pronunciation}>(pronounced high-cuh)</p>
        <p className={styles.info}>
          i'm heika, a dog person who creates for the internet.
        </p>
        <p className={styles.info}>
        buy or stream my album  <Link className={styles.link} href={constants.music.sleepydogs}>
            <a className={styles.link}>SPECIALTY ENDEAVORS (REMASTERED)</a>
          </Link>{" "}
          on all major streaming platforms
        </p>
        <p className={styles.info}>
          or peep my production credits on <Link className={styles.link} href={constants.socials.spotify}>
            <a className={styles.link}>spotify</a>
          </Link>.
        </p>
        <div id="icons">
          {Socials.map(social => (
            <Link key={social.icon} href={social.link}>
              <a>
                <Icon className={social.icon} data-icon="true" icon={social.icon} />
              </a>
            </Link>
          ))}
        </div>
      </div>
      <div
        style={{
          position: "absolute",
          bottom: ".5rem",
          left: ".5rem",
          fontSize: "1.5rem"
        }}
        className="credits">
        <Credits credits={credits} />
      </div>
    </>
  );
};

export async function getStaticProps() {
  // const ers = await fetch("https://dreamland.pogcha.mp/api/credits")
  // const credits = await ers.json()
  return {
    props: {
      credits: {
        url: 'shard.wtf/?ref=heikadog',
        name: 'DATASHARD'
      }
    }
  }
}


export default Index;
