import PaymentsHistory from '@/app/ui/referral-page/table/payments-history';

export default function IncomeAndPayments() {
	return (
		<div className="block-wrapper income-and-payments">
			<div className="section-title">
				<span className="icon">💳</span>
				Доходы и выплаты
			</div>

			<div className="earnings-cards">
				<div className="earning-card success">
					<h4>💰 Доступно к выводу</h4>
					<p>
						0
					</p>
					<small>Минимальная сумма вывода: 100 Б</small>
				</div>

				<div className="earning-card">
					<h4>📈 Всего заработано</h4>
					<p>
						0
					</p>
					<small>За все время участия в программе</small>
				</div>

				<div className="earning-card warning">
					<h4>✅ Выплачено</h4>
					<p>
						0
					</p>
					<small>Успешно выплачено на ваши счета</small>
				</div>
			</div>

			<div className="payout-form">
				<h4>💸 Запросить выплату</h4>
				<div className="payout-wrapper">
					<div className="form-group">
						<label>Сумма к выводу (Б)</label>
						<input type="number" id="payout-amount" min="100.00" max="135.00" step="0.01" placeholder="Введите сумму"></input>
					</div>
					<div className="form-group" >
						<label>Способ выплаты</label>
						<select id="payout-method">
							<option defaultValue="BALANCE">💳 На баланс аккаунта</option>
							<option defaultValue="BANK_TRANSFER">🏦 Банковский перевод</option>
							<option defaultValue="PAYPAL">💰 PayPal</option>
							<option defaultValue="CARD">💳 Банковская карта</option>
						</select>
					</div>
					<button className="btn-success">💸 Заказать выплату</button>
				</div>
			</div>
			<PaymentsHistory />
		</div>
	)
}