import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import { getProfile } from "@/lib/trpc/memoizedRequests"

import { TeamMemberCardTrigger } from "@/components/DigitalTeamMemberCard/Trigger"
import DigitalTeamMemberCard from "@/components/MyPages/DigitalTeamMemberCard"
import DigitalTeamMemberCardAlert from "@/components/MyPages/DigitalTeamMemberCard/Alert"
import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import SectionLink from "@/components/Section/Link"
import { getIntl } from "@/i18n"

import MembershipOverviewCard from "./MembershipOverviewCard"
import UserBaseInfo from "./UserBaseInfo"

import styles from "./overview.module.css"

import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"

export default async function Overview({
  link,
  subtitle,
  title,
}: AccountPageComponentProps) {
  const intl = await getIntl()
  const user = await getProfile()
  if (!user || "error" in user) {
    return null
  }

  return (
    <Section>
      <DigitalTeamMemberCardAlert />
      <SectionHeader
        link={link}
        preamble={subtitle ?? undefined}
        heading={title ?? undefined}
        headingLevel="h1"
      />
      <DigitalTeamMemberCard user={user}>
        <TeamMemberCardTrigger
          className={styles.teamMemberCardButton}
          variant="Tertiary"
          color="Primary"
        >
          <>
            <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
            {intl.formatMessage({
              id: "dtmc.showTeamMemberCard",
              defaultMessage: "Show Team Member Card",
            })}
          </>
        </TeamMemberCardTrigger>
      </DigitalTeamMemberCard>

      <>
        <UserBaseInfo user={user} />
        <div className={styles.membershipCardsContainer}>
          <MembershipOverviewCard user={user} />
          <LevelProgressCard user={user} />
        </div>
      </>

      <SectionLink link={link} variant="mobile" />
    </Section>
  )
}