'use client'

import { getUserData } from '@/app/actions/action';
import { useQuery } from '@tanstack/react-query';
import { convertBytes } from '@/app/lib/convertBytes';

export default function PaymentTabTariffs() {
	const {
		data: userData,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['userData'],
		queryFn: () => {
			return getUserData();
		}
	});

	return (
		<div className="tab-content">
			<div className="billing-toggle" style={{ display: 'none' }}>
				<div>
					<button className="billing-btn active">💳 Помесячно</button>
					<button className="billing-btn">
						🔥 Годовая
						<span>ВЫГОДНО</span>
					</button>
				</div>
			</div>
			<div className="subscription-grid">

				{userData.tariffs?.map(((item: {
					id: number,
					name: string,
					price: number,
					tokens: number,
					maxFilesCount: number,
					diskSize: number
				}) => {
					return (
						<div
							className="plan-card animate-card"
							key={item.id}
						>
							<div className="plan-header">
								<div className="plan-icon">🚀</div>
								<h3 className="plan-name">
									{item.name}
								</h3>
								<div className="plan-price">
									{item.price}
								</div>
								<div className="plan-period">в месяц</div>
								<div className="plan-tokens">
									{item.tokens} токенов включено</div>
							</div>
							<ul className="plan-features">
								<li className="plan-feature">
									<span className="feature-icon">✓</span>
									{item.maxFilesCount} файлов в месяц
								</li>
								<li className="plan-feature">
									<span className="feature-icon">✓</span>
									{item.diskSize ? convertBytes(item.diskSize) : 0} хранилища
								</li>
								<li className="plan-feature">
									<span className="feature-icon">✓</span>
									Базовые модули защиты
								</li>
								<li className="plan-feature">
									<span className="feature-icon">✓</span>
									Поддержка 24/7
								</li>
								<li className="plan-feature">
									<span className="feature-icon not">✗</span>
									API доступ
								</li>
							</ul>
						</div>
					)
				}))}
			</div>
		</div>
	)
}