import { cx } from "class-variance-authority"

import ButtonLink from "@/components/ButtonLink"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import { getIntl } from "@/i18n"
import { appendSlugToPathname } from "@/utils/appendSlugToPathname"

import Facility from "./Facility"

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

import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
import type { WellnessAndExerciseSidePeekProps } from "@/types/components/hotelPage/sidepeek/wellnessAndExercise"

export default async function WellnessAndExerciseSidePeek({
  healthFacilities,
  wellnessExercisePageUrl,
  spaPage,
  heading,
}: WellnessAndExerciseSidePeekProps) {
  const intl = await getIntl()
  const wellnessExercisePageHref = await appendSlugToPathname(
    wellnessExercisePageUrl
  )

  return (
    <SidePeek contentKey={SidepeekSlugs.wellness} title={heading}>
      <div
        className={cx(styles.wrapper, {
          [styles.hasSpaPage]: spaPage,
          [styles.hasWellnessExercisePage]: wellnessExercisePageUrl,
        })}
      >
        {healthFacilities.map((facility) => (
          <Facility key={facility.type} data={facility} />
        ))}
      </div>
      {spaPage || wellnessExercisePageUrl ? (
        <div className={styles.buttonContainer}>
          {spaPage ? (
            <ButtonLink
              href={spaPage.url}
              variant="Tertiary"
              color="Primary"
              typography="Body/Paragraph/mdBold"
            >
              {spaPage.buttonCTA}
            </ButtonLink>
          ) : null}
          {wellnessExercisePageHref ? (
            <ButtonLink
              href={wellnessExercisePageHref}
              color="Primary"
              variant="Secondary"
              typography="Body/Paragraph/mdBold"
            >
              {intl.formatMessage({
                defaultMessage: "Show Gym & Wellness",
              })}
            </ButtonLink>
          ) : null}
        </div>
      ) : null}
    </SidePeek>
  )
}
