import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import { getIntl } from "@/i18n"

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

import type { ActivitiesSidePeekProps } from "@/types/components/hotelPage/sidepeek/activities"

export default async function ActivitiesSidePeek({
  contentPage,
  sidepeekCTA,
  sidepeekSlug,
}: ActivitiesSidePeekProps) {
  const intl = await getIntl()
  const { href, preamble } = contentPage
  return (
    <SidePeek
      contentKey={sidepeekSlug}
      title={intl.formatMessage({
        defaultMessage: "Activities",
      })}
    >
      <Preamble>{preamble}</Preamble>
      <div className={styles.buttonContainer}>
        <Button theme="base" intent="secondary" asChild>
          <Link href={href} weight="bold">
            {sidepeekCTA}
          </Link>
        </Button>
      </div>
    </SidePeek>
  )
}
