# CurrencySelector

`CurrencySelector` 組件提供了一個使用者友善的介面，讓使用者能從可用選項清單中選擇支付貨幣。它會顯示每種貨幣的標誌、符號及相關的支付方式，方便使用者進行選擇。此組件通常用於較大的支付或結帳表單中。

## 屬性

| Prop | 類型 | 描述 | 必填 |
| :----------- | :------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------- | :------- |
| `value` | `string` | 當前所選貨幣的 ID。此 ID 應由父組件的狀態管理。 | 是 |
| `currencies` | `TPaymentCurrency[]` | 一個可用貨幣物件的陣列，用以顯示為可選選項。 | 是 |
| `onChange` | `(currencyId: string, methodId?: string) => void` | 當使用者選擇貨幣時執行的回呼函式。它會接收新的貨幣 ID 和可選的相關支付方式 ID。 | 是 |

### TPaymentCurrency 類型

`currencies` 屬性需要一個具有以下結構的物件陣列：

```typescript TPaymentCurrency icon=mdi:code-json
export type TPaymentCurrency = {
  id: string;       // 貨幣選項的唯一識別碼
  logo: string;     // 貨幣/方式標誌的 URL
  name: string;     // 貨幣的顯示名稱
  symbol: string;   // 貨幣符號（例如：'$'、'€'）
  method: {         // 相關的支付方式
    id: string;
    name: string;
  };
};
```

## 使用範例

這是一個如何實現 `CurrencySelector` 組件的基本範例。您需要在父組件中管理所選貨幣的狀態，並提供一個可用貨幣的清單。

請注意，`@blocklet/payment-react` 組件設計為在 `PaymentProvider` 內運作，`PaymentProvider` 提供了必要的主題和上下文。請確保您的組件被適當地包裹。

```jsx MyCurrencySelectorComponent.tsx icon=logos:react
import React, { useState } from 'react';
import { PaymentProvider } from '@blocklet/payment-react';
import { CurrencySelector } from '@blocklet/payment-react/components';
import type { TPaymentCurrency } from '@blocklet/payment-types';
import { useSessionContext } from '@/hooks/session-context'; // 根據您的專案結構調整此匯入路徑

// 用於示範的模擬資料
const mockCurrencies: TPaymentCurrency[] = [
  {
    id: 'usd_xxxxxx',
    logo: 'https://path-to-your/usd-logo.png',
    name: 'US Dollar',
    symbol: 'USD',
    method: {
      id: 'stripe_yyyyy',
      name: 'Stripe',
    },
  },
  {
    id: 'eth_zzzzzz',
    logo: 'https://path-to-your/eth-logo.png',
    name: 'Ethereum',
    symbol: 'ETH',
    method: {
      id: 'crypto_aaaaa',
      name: 'Crypto Payment',
    },
  },
];

function MyCurrencySelectorComponent() {
  const [selectedCurrency, setSelectedCurrency] = useState<string>(mockCurrencies[0].id);

  const handleCurrencyChange = (currencyId: string, methodId?: string) => {
    console.log(`選擇的貨幣：${currencyId}，方式：${methodId}`);
    setSelectedCurrency(currencyId);
  };

  return (
    <div>
      <h3>選擇貨幣</h3>
      <CurrencySelector
        value={selectedCurrency}
        currencies={mockCurrencies}
        onChange={handleCurrencyChange}
      />
    </div>
  );
}

// 您的應用程式進入點
export default function App() {
  const { session, connectApi } = useSessionContext();

  if (!session || !connectApi) {
    return <div>載入中...</div>;
  }

  return (
    <PaymentProvider session={session} connectApi={connectApi}>
      <MyCurrencySelectorComponent />
    </PaymentProvider>
  );
}
```

在此範例中：
1.  我們定義了一個遵循 `TPaymentCurrency` 結構的 `mockCurrencies` 陣列。
2.  `MyCurrencySelectorComponent` 使用 `useState` hook 來追蹤 `selectedCurrency`。
3.  `handleCurrencyChange` 函式在選擇新貨幣時更新狀態，並記錄新值。
4.  `CurrencySelector` 是一個受控組件，其 `value` 和 `onChange` 屬性由父組件的狀態管理。
5.  整個組件被包裹在 `PaymentProvider` 中，以確保正確的渲染和存取用於樣式設定的 Material-UI 主題。