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

import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"

import OpeningHours from "../../HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours"
import { translateWellnessType } from "../../HotelPage/utils"

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

import { Country } from "@/types/enums/country"
import type { HealthFacility, Hotel } from "@/types/hotel"

interface WellnessSidebarProps {
  healthFacilities: HealthFacility[]
  address: Hotel["address"]
  contactInformation: Hotel["contactInformation"]
}

export default async function WellnessSidebar({
  healthFacilities,
  address,
  contactInformation,
}: WellnessSidebarProps) {
  const intl = await getIntl()

  return (
    <>
      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Opening hours",
            })}
          </h3>
        </Typography>
        {healthFacilities.map((facility) => (
          <div key={facility.type} className={styles.facility}>
            <Typography variant="Title/Subtitle/md" className={styles.text}>
              <h4>{translateWellnessType(facility.type, intl)}</h4>
            </Typography>

            <OpeningHours data={facility} showTitle={false} />
          </div>
        ))}
      </div>
      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Address",
            })}
          </h3>
        </Typography>
        <div className={styles.contactDetails}>
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.text}
          >
            <div>
              <p>{address.streetAddress}</p>
              <p>
                {address.zipCode} {address.city}
              </p>
              <p> {address.country}</p>
            </div>
          </Typography>
        </div>
      </div>

      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Contact us",
            })}
          </h3>
        </Typography>
        <div className={styles.contactDetails}>
          <Link href={`tel:${contactInformation.phoneNumber}`}>
            {contactInformation.phoneNumber}
          </Link>
          {address.country === Country.Finland ? (
            <Typography
              variant="Body/Paragraph/mdRegular"
              className={styles.text}
            >
              <p>
                {intl.formatMessage({
                  defaultMessage: "Price 0,16 €/min + local call charges",
                })}
              </p>
            </Typography>
          ) : null}
        </div>
      </div>
    </>
  )
}
