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

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

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

import type { DestinationProps } from "@/types/components/destinationOverviewPage/destinationsList/destinationsData"

export default async function Destination({
  country,
  countryUrl,
  numberOfHotels,
  cities,
}: DestinationProps) {
  const intl = await getIntl()
  const accordionSubtitle = intl.formatMessage(
    {
      defaultMessage: "{amount, plural, one {# hotel} other {# hotels}}",
    },
    { amount: numberOfHotels }
  )

  return (
    <AccordionItem title={country} subtitle={accordionSubtitle}>
      <div className={styles.container}>
        <ul className={styles.citiesList}>
          {cities
            .sort((a, b) => a.name.localeCompare(b.name, intl.locale))
            .map((city) =>
              city.hotelCount > 0 ? (
                <li key={city.id}>
                  <Link
                    href={city.url}
                    color="Text/Interactive/Secondary"
                    textDecoration="underline"
                  >
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {`${city.name} (${city.hotelCount})`}
                  </Link>
                </li>
              ) : null
            )}
        </ul>
        {countryUrl && (
          <Link href={countryUrl} weight="bold">
            {intl.formatMessage(
              {
                defaultMessage: "View all hotels in {country}",
              },
              { country: country }
            )}
            <MaterialIcon icon="arrow_forward" color="CurrentColor" />
          </Link>
        )}
      </div>
    </AccordionItem>
  )
}
