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

import { getIntl } from "@/i18n"

import { translateWellnessType } from "../../../utils"
import SidePeekImages from "../../Images"
import OpeningHours from "./OpeningHours"
import { translateWellnessDetails } from "./utils"

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

import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility"

export default async function Facility({ data }: FacilityProps) {
  const intl = await getIntl()
  const image = data.content.images[0]

  const details = await translateWellnessDetails({
    details: data.details,
    type: data.type,
  })

  return (
    <div className={styles.content}>
      {image ? <SidePeekImages images={[image]} /> : null}
      <div className={styles.information}>
        <Typography variant="Title/Subtitle/lg" className={styles.title}>
          <h3>{translateWellnessType(data.type, intl)}</h3>
        </Typography>
        {details && (
          <Typography variant="Body/Paragraph/mdRegular">
            <ul className={styles.heartList}>
              {details.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </Typography>
        )}
        <OpeningHours data={data} />
      </div>
    </div>
  )
}
