import CurrentBenefitsBlock from "@/components/MyPages/Blocks/Benefits/CurrentLevel"
import NextLevelBenefitsBlock from "@/components/MyPages/Blocks/Benefits/NextLevel"
import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
import Title from "@/components/Title"

import { shortcuts } from "./_constants"

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

import type { LangParams, PageArgs } from "@/types/params"

export default function BenefitsPage({ params }: PageArgs<LangParams>) {
  return (
    <main className={styles.container}>
      <header className={styles.header}>
        <Title as="h3" className={styles.title} uppercase>
          Your Perks and benefits. Tailored just for{" "}
          <span className={styles.red}>you.</span>
        </Title>
        <p className={styles.preamble}>
          Discover the exclusive benefits and delightful surprises our
          friendship unlocks.
        </p>
      </header>
      <CurrentBenefitsBlock />
      <Shortcuts
        shortcuts={shortcuts}
        title={
          <span className={styles.title}>
            Perks and benefits{" "}
            <span className={styles.red}>for All friends.</span>
          </span>
        }
        subtitle="Always Yours. Universal Benefits for the Scandic Friends community."
      />
      <NextLevelBenefitsBlock />
    </main>
  )
}