import Label from "./Label"
import ListItem from "./ListItem"

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

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

export default function List({
  getItemProps,
  highlightedIndex,
  initialIndex = 0,
  label,
  locations,
}: ListProps) {
  if (!locations.length) {
    return null
  }
  return (
    <ul className={styles.list}>
      {label ? <Label>{label}</Label> : null}
      {locations.map((location, index) => (
        <ListItem
          getItemProps={getItemProps}
          highlightedIndex={highlightedIndex}
          index={initialIndex + index}
          key={location.id}
          location={location}
        />
      ))}
    </ul>
  )
}
