import { RevealFade } from "@/components/design/RevealFade"
import { Section } from "@/components/design/Section"
import { Interests } from "@/components/Interests"
import { Portfolio } from "@/components/Portfolio"
import { Profile } from "@/components/Profile"
import { SocialMediaList } from "@/components/Profile/SocialMediaList"
import { Skills } from "@/components/Skills"
import { OpenSource } from "@/components/OpenSource"
import { getI18n } from "@/i18n/i18n.server"

const HomePage = (): JSX.Element => {
  const i18n = getI18n()

  return (
    <main className="flex flex-col md:mx-auto md:max-w-4xl lg:max-w-7xl">
      <Section isMain id="about">
        <Profile />
        <SocialMediaList />
      </Section>

      <RevealFade>
        <Section
          id="interests"
          heading={i18n.translate("home.interests.title")}
        >
          <Interests />
        </Section>
      </RevealFade>

      <RevealFade>
        <Section
          id="skills"
          heading={i18n.translate("home.skills.title")}
          withoutShadowContainer
        >
          <Skills />
        </Section>
      </RevealFade>

      <RevealFade>
        <Section
          id="portfolio"
          heading={i18n.translate("home.portfolio.title")}
          withoutShadowContainer
        >
          <Portfolio />
        </Section>
      </RevealFade>

      <RevealFade>
        <Section id="open-source" heading="Open source" withoutShadowContainer>
          <OpenSource />
        </Section>
      </RevealFade>
    </main>
  )
}

export default HomePage