import { Link } from "@nextui-org/link";
import { Avatar, Spacer } from "@nextui-org/react";
import { button as buttonStyles } from "@nextui-org/theme";

import { siteConfig } from "@/config/site";
import { title, subtitle } from "@/components/primitives";
import { GithubIcon, TwitterIcon, MavenIcon, GiteaIcon } from "@/components/icons";

export default function Home() {
  return (
    <section className="flex flex-col items-center justify-center gap-12 py-8 md:py-10">
      <Spacer y={20} />
      <div className="flex flex-row items-center justify-center gap-6">
        <Avatar className="w-40 h-40 text-large" src="/avatar.jpg" />
        <div className="inline-block max-w-xl text-center justify-center gap-4">
          <h1 className={title()}>DeeChael</h1>
          <br />
          <h2 className={subtitle()}>A&nbsp;</h2>
          <h2 className={subtitle({ color: "pink" })}>
            non-professional&nbsp;
          </h2>
          <h2 className={subtitle()}>developer who&nbsp;</h2>
          <br />
          <h2 className={subtitle()}>knows&nbsp;</h2>
          <h2 className={subtitle({ color: "yellow" })}>Java</h2>
          <h2 className={subtitle()}>/</h2>
          <h2 className={subtitle({ color: "violet" })}>Kotlin</h2>
          <h2 className={subtitle()}>.</h2>
        </div>
      </div>

      <div className="flex gap-3">
        <Link
          isExternal
          className={buttonStyles({ variant: "bordered", radius: "full" })}
          href={siteConfig.links.twitter}
        >
          <TwitterIcon size={20} />
        </Link>
        <Link
          isExternal
          className={buttonStyles({ variant: "bordered", radius: "full" })}
          href={siteConfig.links.github}
        >
          <GithubIcon size={20} />
        </Link>
        <Link
          isExternal
          className={buttonStyles({ variant: "bordered", radius: "full" })}
          href={siteConfig.links.github}
        >
          <GiteaIcon size={20} />
        </Link>
        <Link
          isExternal
          className={buttonStyles({ variant: "bordered", radius: "full" })}
          href={siteConfig.links.maven}
        >
          <MavenIcon size={40} />
        </Link>
      </div>
    </section>
  );
}