'use client'

import { useTranslations } from 'next-intl'
import {useViolationGeography} from '@/app/hooks/react-query/useViolationGeography';

export default function AnalyticsCardGeography() {
	const t = useTranslations('Global');
	const { data: violationGeography, isLoading, isError, error } = useViolationGeography();

	return (
		<div className="analytics-card">
			<div className="analytics-header">
				<div className="analytics-icon"></div>
				<h3 className="analytics-title">
					{t('geography-of-violations')}
				</h3>
			</div>
			<div className="storage-timeline">
				<div className="timeline-item">
					<span className="timeline-month">
						{t('russia')}
					</span>
					<span className="method-count">0</span>
				</div>
				<div className="timeline-item">
					<span className="timeline-month">
						{t('usa')}
					</span>
					<span className="method-count">0</span>
				</div>
				<div className="timeline-item">
					<span className="timeline-month">
						{t('germany')}
					</span>
					<span className="method-count">0</span>
				</div>
				<div className="timeline-item">
					<span className="timeline-month">
						{t('france')}
					</span>
					<span className="method-count">0</span>
				</div>
				<div className="timeline-item">
					<span className="timeline-month">
						{t('uk')}
					</span>
					<span className="method-count">0</span>
				</div>
				<div className="timeline-item">
					<span className="timeline-month">
						{t('china')}
					</span>
					<span className="method-count">0</span>
				</div>
			</div>
		</div>
	)
}