import React from "react"
import { Empty, Select, Spin } from "antd"
import lodash from "lodash"
import { SelectCountryProps } from "@component/Common/SelectCountries"
import { useTranslations } from "next-intl"
import { ICountry } from "@/type/Common"

export const SelectCountryComponent = (props: SelectCountryProps) => {
  const { options, loading } = props
  const transGeneral = useTranslations("general")

  return (
    <Select
      placeholder={transGeneral("pl_select_country")}
      showSearch
      allowClear
      optionFilterProp="children"
      filterOption={(input: any, option: any) => {
        return (option?.children ?? "")?.toLowerCase()?.includes(input?.toLowerCase())
      }}
      filterSort={(optionA: any, optionB: any) => {
        return (optionA?.children ?? "")?.toLowerCase()?.localeCompare((optionB?.children ?? "")?.toLowerCase())
      }}
      notFoundContent={loading ? <Spin /> : <Empty />}
      {...lodash.omit(props, "options")}>
      {options &&
        options?.map((item: ICountry) => {
          return (
            <Select.Option
              key={item?.code}
              value={item?.code}>
              {item.name}
            </Select.Option>
          )
        })}
    </Select>
  )
}