'use client'

import { useState } from 'react';
import PaymentTabTariffs from '@/app/ui/payment/payment-tab-tariffs';
import PaymentTubBuyTokens from './payment-tab-buy-tokens';
import PaymentTabTransactionHistory from './payment-tab-transaction-history'; 


export default function PaymentTabs() {
	let [selectedTab, setSelectedTab] = useState('1');
	function switchTabsHandler(tab: string) {
		setSelectedTab(tab);
	}
	return (
		<>
			<div className="payment-tabs">
				<button
					className={`payment-tab ${selectedTab === '1' ? 'active' : ''}`}
					onClick={() => {
						switchTabsHandler('1')
					}}>
					Тарифные планы
				</button>
				<button
					className={`payment-tab ${selectedTab === '2' ? 'active' : ''}`}
					onClick={() => {
						switchTabsHandler('2')
					}}>
					Пополнить токены
				</button>
				<button
					className={`payment-tab ${selectedTab === '3' ? 'active' : ''}`}
					onClick={() => {
						switchTabsHandler('3')
					}}>
					История операций
				</button>
			</div>
			<div className="tab-content">
				{selectedTab === '1' && (
					<PaymentTabTariffs/>
				)}
				{selectedTab === '2' && (
					<PaymentTubBuyTokens/>
				)}
				{selectedTab === '3' && (
					<PaymentTabTransactionHistory/>
				)}
			</div>
		</>
	)
}