import SkeletonShimmer from "@/components/SkeletonShimmer"

import Label from "./Label"
import ListItem, { ListItemSkeleton } from "./ListItem"

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

import type { SearchListProps } from "@/types/components/search"
import type { AutoCompleteLocation } from "@/server/routers/autocomplete/schema"

interface ListProps
  extends Pick<SearchListProps, "getItemProps" | "highlightedIndex"> {
  initialIndex?: number
  label?: string
  locations: AutoCompleteLocation[]
}

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 + index}
          location={location}
        />
      ))}
    </ul>
  )
}

export function ListSkeleton() {
  return (
    <ul className={styles.list}>
      <Label>
        <SkeletonShimmer width="50px" height="15px" display="block" />
      </Label>
      {Array.from({ length: 2 }, (_, index) => (
        <ListItemSkeleton key={index} />
      ))}
    </ul>
  )
}
