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>
						135.00 Б
					</p>
					<small>Минимальная сумма вывода: 100 Б</small>
				</div>

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

				<div className="earning-card warning">
					<h4>✅ Выплачено</h4>
					<p>
						0.00 Б
					</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>

			<h4 className="mt-[30px]">📊 История выплат</h4>
			<div className="stats-grid">
				<div className="stats-item left-top-corner stats-header">
					Сумма
				</div>
				<div className="stats-item stats-header">
					Способ
				</div>
				<div className="stats-item stats-header">
					Статус
				</div>
				<div className="stats-item stats-header">
					Дата запроса
				</div>
				<div className="stats-item last-column right-top-corner stats-header">
					Обработано
				</div>

				<div className="stats-item first-column second-row">
					100.00
				</div>
				<div className="stats-item second-row">
					0
				</div>
				<div className="stats-item second-row">
					0
				</div>
				<div className="stats-item second-row">
					0
				</div>
				<div className="stats-item second-row last-column">
					0
				</div>

				<div className="stats-item first-column">
					100.00
				</div>
				<div className="stats-item">
					0
				</div>
				<div className="stats-item">
					0
				</div>
				<div className="stats-item">
					0
				</div>
				<div className="stats-item last-column">
					0
				</div>

				<div className="stats-item last-row left-bottom-corner first-column">
					100.00
				</div>
				<div className="stats-item last-row">
					0
				</div>
				<div className="stats-item last-row">
					0
				</div>
				<div className="stats-item last-row">
					0
				</div>
				<div className="stats-item last-row last-column right-bottom-corner">
					0
				</div>
			</div>
		</div>
	)
}