import Body from "@/components/TempDesignSystem/Text/Body"

import { listItemVariants } from "./variants"

import type { ListItemProps } from "@/types/components/search"

export default function ListItem({
  getItemProps,
  highlightedIndex,
  index,
  location,
}: ListItemProps) {
  const classNames = listItemVariants({
    variant: index === highlightedIndex ? "active" : "default",
  })

  const isCity = location.type === "cities"
  const isHotelLocation = location.type === "hotels"
  return (
    <li
      {...getItemProps({
        className: classNames,
        index,
        item: location,
      })}
    >
      <Body color="black" textTransform="bold">
        {location.name}
      </Body>
      {isCity && location?.country ? (
        <Body color="uiTextPlaceholder">{location.country}</Body>
      ) : null}
      {isHotelLocation && location.relationships.city?.name ? (
        <Body color="uiTextPlaceholder">
          {location.relationships.city.name}
        </Body>
      ) : null}
    </li>
  )
}
