/* deleted */

/* .storage-breakdown {
	.storage-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid #f1f5f9;
	}

	.storage-icon {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;

		&.storage-icon.photos {
			background: #dbeafe;
			color: #1d4ed8;
		}

		&.storage-icon.videos {
			background: #f3e8ff;
			color: #7c3aed;
		}

		&.storage-icon.audio {
			background: #d1fae5;
			color: #059669;
		}

		&.storage-icon.documents {
			background: #fed7d7;
			color: #dc2626;
		}

		&.storage-icon.code {
			background: #e0e7ff;
			color: #4f46e5;
		}

		&.storage-icon.text {
			background: #fef3c7;
			color: #d97706;
		}
	}

	.storage-type {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.storage-footer {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 2px solid #e2e8f0;
	}

	.storage-footer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.storage-footer-title {
		font-weight: 600;
		color: #1e293b;
	}

	.storage-footer-weight {
		font-weight: 600;
		color: #6366f1;
		font-size: 16px;
	}

	.progress-bar {
		background: #f1f5f9;
		border-radius: 10px;
		height: 8px;
		overflow: hidden;
		margin: 15px 0;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #10b981, #059669);
		border-radius: 10px;
		transition: width 0.8s ease;
	}
} */

export default function StorageBreakdown() {
	return (
		<div className="storage-breakdown block-wrapper">
			<h3 className="chart-title">Использование хранилища</h3>

			<div className="storage-item">
				<div className="storage-type">
					<div className="storage-icon photos">📸</div>
					<span>Изображения</span>
				</div>
				<div>0 МБ</div>
			</div>

			<div className="storage-item">
				<div className="storage-type">
					<div className="storage-icon videos">🎬</div>
					<span>Видео</span>
				</div>
				<div>0 МБ</div>
			</div>

			<div className="storage-item">
				<div className="storage-type">
					<div className="storage-icon audio">🎵</div>
					<span>Аудио</span>
				</div>
				<div>0 МБ</div>
			</div>

			<div className="storage-item">
				<div className="storage-type">
					<div className="storage-icon documents">📄</div>
					<span>Документы</span>
				</div>
				<div>0 КБ</div>
			</div>

			<div className="storage-item">
				<div className="storage-type">
					<div className="storage-icon code">💻</div>
					<span>Код (PHP/JS)</span>
				</div>
				<div>0 Б</div>
			</div>

			<div className="storage-item">
				<div className="storage-type">
					<div className="storage-icon text">📝</div>
					<span>Текст</span>
				</div>
				<div>0 Б</div>
			</div>

			<div className="storage-footer">
				<div className="storage-footer-header">
					<span className="storage-footer-title">Общий объем:</span>
					<span className="storage-footer-weight">0 МБ</span>
				</div>
				<div className="progress-bar">
					<div className="progress-fill" style={{ width: "50%" }}></div>
				</div>
			</div>
		</div>
	)
}