"use client"

import { useIntl } from "react-intl"

import { useDestinationDataStore } from "@/stores/destination-data"

import Select from "@/components/TempDesignSystem/Select"

import type { SortItem } from "@/types/components/destinationFilterAndSort"
import type { SortOption } from "@/types/enums/destinationFilterAndSort"

interface SortProps {
  sortItems: SortItem[]
}

export default function Sort({ sortItems }: SortProps) {
  const intl = useIntl()
  const { pendingSort, setPendingSort } = useDestinationDataStore((state) => ({
    pendingSort: state.pendingSort,
    setPendingSort: state.actions.setPendingSort,
  }))

  return (
    <Select
      items={sortItems}
      defaultSelectedKey={pendingSort}
      label={intl.formatMessage({
        defaultMessage: "Sort by",
      })}
      aria-label={intl.formatMessage({
        defaultMessage: "Sort by",
      })}
      name="sort"
      showRadioButton
      onSelect={(sort) => setPendingSort(sort as SortOption)}
    />
  )
}
