'use client'

import { BadgeDollarSign } from 'lucide-react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { CurrencyCode, useCurrency } from '@/components/currency-provider'

export function CurrencySelect() {
  const { currency, setCurrency } = useCurrency()

  return (
    <div className="flex items-center gap-2">
      <BadgeDollarSign className="h-4 w-4 text-muted-foreground" />
      <Select value={currency} onValueChange={(value: CurrencyCode) => setCurrency(value)}>
        <SelectTrigger className="h-9 w-[92px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="MAD">MAD</SelectItem>
          <SelectItem value="EUR">EUR</SelectItem>
          <SelectItem value="USD">USD</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}