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


const Index = () => {
  let AvatarSize = 200;
  return (
    <>
      <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}>
          check my music out on my solo album  <Link className={styles.link} href={constants.soundcloud}>
            <a>CLUB SIBERIAN VOL. 1</a>
          </Link>
        </p>
        <p className={styles.info}>
          or peep my production credits on <Link className={styles.link} href={constants.spotify}>
            <a>spotify</a>
          </Link> and <Link className={styles.link} href={constants.soundcloud}>
            <a>soundcloud</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>
    </>
  );
};

export default Index;