import React from 'react';
import { PlusIcon } from '@heroicons/react/24/outline';

export type PaymentTab = 'bank' | 'pos';

/**
 * سربرگ صفحهٔ مدیریت پرداخت — پورت مبدأ PaymentManagement/Head.jsx.
 * تیتر + سوییچ تب (حساب بانکی / کارت خوان) + دکمهٔ افزودن.
 */
export default function PaymentMethodHead({
  activeTab,
  onTabChange,
  onAdd,
}: {
  activeTab: PaymentTab;
  onTabChange: (tab: PaymentTab) => void;
  onAdd: () => void;
}) {
  return (
    <div style={{ marginBottom: 20 }}>
      <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', margin: '0 0 16px' }}>
        مدیریت پرداخت‌ها
      </h2>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
        <div className="seg" role="tablist">
          <button
            type="button"
            role="tab"
            aria-selected={activeTab === 'bank'}
            className={activeTab === 'bank' ? 'on' : ''}
            onClick={() => onTabChange('bank')}
          >
            حساب بانکی
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={activeTab === 'pos'}
            className={activeTab === 'pos' ? 'on' : ''}
            onClick={() => onTabChange('pos')}
          >
            کارت خوان
          </button>
        </div>
        <button className="btn primary" onClick={onAdd}>
          <PlusIcon style={{ width: 16 }} />
          {activeTab === 'bank' ? 'افزودن حساب بانکی' : 'افزودن کارت خوان'}
        </button>
      </div>
    </div>
  );
}