'use client'

import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';

export default function FilePpageFileStatistic() {
	const { data: violationStatistic } = useViolationStatistic();

	return (
		<div
			className="block-wrapper"
		>
			<div className="card-header">
				<h3 className="card-title">
					Статистика по файлу
				</h3>
			</div>

			<div className="stats-mini-grid">
				<div className="stat-mini-card">
					<div
						className="stat-mini-value"
						style={{ 'color': '#dc2626' }}
					>
						{violationStatistic?.new_violations ? violationStatistic?.new_violations : 0}
					</div>
					<div className="stat-mini-label">Новых</div>
				</div>
				<div className="stat-mini-card">
					<div
						className="stat-mini-value"
						style={{ 'color': '#d97706' }}
					>
						{(violationStatistic?.in_progress_violations ? violationStatistic?.in_progress_violations : 0) + (violationStatistic?.in_progress_violations ? violationStatistic?.total_law_cases : 0)}
					</div>
					<div className="stat-mini-label">В работе</div>
				</div>
				<div className="stat-mini-card">
					<div
						className="stat-mini-value"
						style={{ 'color': '#059669' }}
					>
						{violationStatistic?.resolved_violations ? violationStatistic?.resolved_violations : 0}
					</div>
					<div className="stat-mini-label">Решено</div>
				</div>
				<div className="stat-mini-card">
					<div
						className="stat-mini-value"
						style={{ 'color': '#6366f1' }}
					>
						{violationStatistic?.total_violations ? violationStatistic?.total_violations : 0}
					</div>
					<div className="stat-mini-label">Всего</div>
				</div>
			</div>
		</div>
	)
}