import { CurrencyPageProps } from "@/types/home/client-side"
import { usePage, router } from "@inertiajs/react"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../ui/select"


type CurrencySelectorProp = {
    currency: CurrencyPageProps
}



export default function CurrencySelector() {

    const { currency } = usePage().props as unknown as CurrencySelectorProp


    if (!currency) return


    const changeCurrency = (code: string) => {
        router.post('/currency/change', { currency: code })
    }

    if (currency.available.length <= 0) return

    return <Select value={currency.selected} onValueChange={value => changeCurrency(value)} >
        <SelectTrigger className="w-fit text-neutral-300 border-none text-[11px] p-0 h-fit ring-0" size="sm">
            <SelectValue placeholder="Select a cateogry" className="p-0 h-fit" />
        </SelectTrigger>
        <SelectContent className="rounded-sm bg-main-dark text-white border-neutral-600">
            <SelectGroup>
                {currency.available.map(c => (
                    <SelectItem className="text-xs rounded-sm" key={c.code} value={c.code}>  <span>{c.code} ({c.symbol}) </span> : <span>{c.country}</span></SelectItem>
                ))}
            </SelectGroup>
        </SelectContent>
    </Select>
}