'use client'

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

interface DomainListProps {
	data: UseViolationStatistic;
}

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

	const DomainList = ({ data }: DomainListProps) => {
		const topDomains = Object.entries(data)
			.map(([domain, count]) => ({ domain, count }))
			.sort((a, b) => b.count - a.count)
			.slice(0, 6);

		return (
			<div className="storage-timeline">
				{topDomains.map((item, index) => (
					<div
						className="timeline-item"
						key={item.domain}
					>
						<span className="timeline-month">
							{item.domain}
						</span>
						<span className="method-count">
							{item.count}
						</span>
					</div>
				))}
			</div>
		);
	};

	return (
		<div className="analytics-card">
			<div className="analytics-header">
				<div className="analytics-icon"></div>
				<h3 className="analytics-title">
					{t('distribution-analytics')}
				</h3>
			</div>
			{violationGeography && (
				<DomainList data={violationGeography} />
			)}
		</div>
	)
}