"use client";

import type { Currency } from "@/lib/types/pricing";
import { CurrencyManager } from "@/lib/utils/currency";

interface CurrencySelectorProps {
  selected: Currency;
  onChange: (currency: Currency) => void;
  isAr: boolean;
}

export default function CurrencySelector({
  selected,
  onChange,
  isAr,
}: CurrencySelectorProps) {
  return (
    <div className="mt-6 flex justify-center items-center gap-3">
      <label className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
        {isAr ? "العملة:" : "Currency:"}
      </label>
      <select
        value={selected}
        onChange={(e) => onChange(e.target.value as Currency)}
        className="px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-brand-ink dark:text-white font-medium focus:ring-2 focus:ring-brand-green focus:border-transparent"
      >
        {CurrencyManager.getAllCurrencies().map((currency) => {
          const info = CurrencyManager.getCurrencyInfo(currency);
          return (
            <option key={currency} value={currency}>
              {info.symbol} {currency}
            </option>
          );
        })}
      </select>
    </div>
  );
}