"use client"

import { useIntl } from "react-intl"

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

import ButtonLink from "@/components/ButtonLink"
import { IconName } from "@/components/Icons/iconName"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"

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

import type { AccessibilityAccordionItemProps } from "@/types/components/sidePeeks/amenities"

export default function AccessibilityAccordionItem({
  elevatorPitch,
  accessibilityPageHref,
}: AccessibilityAccordionItemProps) {
  const intl = useIntl()

  if (!elevatorPitch && !accessibilityPageHref) {
    return null
  }

  return (
    <AccordionItem
      title={intl.formatMessage({
        defaultMessage: "Accessibility",
      })}
      iconName={IconName.Accessibility}
      className={styles.accordionItem}
      variant="sidepeek"
      trackingId="amenities:accessibility"
    >
      <div className={styles.accessibilityContent}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{elevatorPitch}</p>
        </Typography>
        {accessibilityPageHref ? (
          <ButtonLink
            href={accessibilityPageHref}
            variant="Secondary"
            color="Primary"
            size="Medium"
            typography="Body/Paragraph/mdBold"
          >
            {intl.formatMessage({ defaultMessage: "About accessibility" })}
          </ButtonLink>
        ) : null}
      </div>
    </AccordionItem>
  )
}
