import Accordion from "@/components/TempDesignSystem/Accordion"
import Divider from "@/components/TempDesignSystem/Divider"

import Destination from "./Destination"

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

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

export function DestinationsList({ destinations }: DestinationsListProps) {
  const middleIndex = Math.ceil(destinations.length / 2)
  const accordionLeft = destinations.slice(0, middleIndex)
  const accordionRight = destinations.slice(middleIndex)

  return (
    <div className={styles.listContainer}>
      <Accordion className={styles.accordion}>
        {accordionLeft.map((data) =>
          data.numberOfHotels > 0 ? (
            <Destination
              key={data.country}
              country={data.country}
              countryUrl={data.countryUrl}
              numberOfHotels={data.numberOfHotels}
              cities={data.cities}
            />
          ) : null
        )}
      </Accordion>
      <Divider color="subtle" className={styles.divider} />
      <Accordion className={styles.accordion}>
        {accordionRight.map((data) =>
          data.numberOfHotels > 0 ? (
            <Destination
              key={data.country}
              country={data.country}
              countryUrl={data.countryUrl}
              numberOfHotels={data.numberOfHotels}
              cities={data.cities}
            />
          ) : null
        )}
      </Accordion>
    </div>
  )
}
