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

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

import HeroHeader from "../HeroHeader"
import HtmlContent from "../HtmlContent"

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

import type { AdditionalData } from "@/types/hotel"

interface AccessibilitySubpageProps {
  hotelName: string
  additionalData: AdditionalData
}

export default async function AccessibilitySubpage({
  hotelName,
  additionalData,
}: AccessibilitySubpageProps) {
  const intl = await getIntl()
  const { hotelSpecialNeeds, specialNeedGroups, accessibility } = additionalData
  const { mainBody, elevatorPitch } = hotelSpecialNeeds
  const heroImage = accessibility?.heroImages[0]

  return (
    <>
      <section className={styles.accessibilitySubpage}>
        <HeroHeader
          breadcrumbsTitle={intl.formatMessage({
            defaultMessage: "Accessibility",
          })}
          heroImage={heroImage}
        />

        <div className={styles.contentContainer}>
          <Typography variant="Title/md">
            <h1 className={styles.heading}>
              {intl.formatMessage(
                {
                  defaultMessage: "Accessibility at {hotel}",
                },
                {
                  hotel: hotelName,
                }
              )}
            </h1>
          </Typography>

          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />

          <main className={styles.mainContent}>
            {elevatorPitch ? (
              <div className={styles.intro}>
                <Typography variant="Body/Lead text">
                  <p>{elevatorPitch}</p>
                </Typography>
              </div>
            ) : null}

            {mainBody ? <HtmlContent html={mainBody} /> : null}

            <div className={styles.accessibilityInformation}>
              {specialNeedGroups.map((accessibilityGroup) => (
                <div
                  key={accessibilityGroup.name}
                  className={styles.accessibilityGroup}
                >
                  <Typography variant="Title/Subtitle/md">
                    <h2>{accessibilityGroup.name}</h2>
                  </Typography>
                  <ul className={styles.list}>
                    {accessibilityGroup.specialNeeds.map((groupItem) => (
                      <Typography
                        key={groupItem.name}
                        variant="Body/Paragraph/mdRegular"
                      >
                        <li className={styles.listItem}>
                          {groupItem.details
                            ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
                              `${groupItem.name}: ${groupItem.details}`
                            : groupItem.name}
                        </li>
                      </Typography>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </main>
        </div>
      </section>
    </>
  )
}
