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

import { listItemVariants } from "./variants"

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

export interface ListItemProps
  extends Pick<SearchListProps, "getItemProps" | "highlightedIndex"> {
  index: number
  location: AutoCompleteLocation
}

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

  return (
    <li
      {...getItemProps({
        className: classNames,
        index,
        item: location,
      })}
    >
      <Body color="black" textTransform="bold">
        {location.name}
      </Body>
      {location.destination && (
        <Body color="uiTextPlaceholder">{location.destination}</Body>
      )}
    </li>
  )
}

export function ListItemSkeleton() {
  const classNames = listItemVariants({
    variant: "default",
  })

  return (
    <li className={classNames}>
      <div style={{ marginBottom: "0.25rem" }}>
        <SkeletonShimmer width={"200px"} height="18px" display="block" />
      </div>

      <div>
        <SkeletonShimmer width={"70px"} height="18px" display="block" />
      </div>
    </li>
  )
}
