no-copy-frontend/src/app/ui/marking-page/protection-summary.tsx

'use client'

import { useState } from 'react';
import { StackedBarChart } from '@/app/components/StackedBarChart';
import { useTranslations } from 'next-intl';

const data = [
	{
		name: 'File A',
		checks: 4000,
		violations: 2000
	},
	{
		name: 'File B',
		checks: 3000,
		violations: 1400
	},
	{
		name: 'File C',
		checks: 2000,
		violations: 1000
	},
	{
		name: 'File D',
		checks: 2780,
		violations: 1000
	},
	{
		name: 'File E',
		checks: 5090,
		violations: 4800
	},
	{
		name: 'File F',
		checks: 5390,
		violations: 3800
	},
	{
		name: 'File H',
		checks: 4000,
		violations: 1500
	}
];

export default function ProtectionSummary() {
	const [isOpen, setIsOpen] = useState(false);
	const t = useTranslations('Global');

	return (
		<div className="protection-overview">
			<h3>{t('protecting-your-content')}</h3>
			<p>{t('current-status-of')}</p>
			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
				<div className="protection-stat total-files">
					<div className="protection-stat-value">0</div>
					<div className="protection-stat-label">{t('total-files')}</div>
				</div>

				<div className="protection-stat total-checks">
					{isOpen ? (
						<>
							<div className="protection-stat-value">0</div>
							<div className="protection-stat-label">
								{t('size')}
							</div>
						</>
					) :
						<>
							<div className="protection-stat-row">
								<div className="protection-stat-value">0</div>
								<div className="protection-stat-label">{t('check')}</div>
							</div>
							<div className="protection-stat-row">
								<div className="protection-stat-value">0</div>
								<div className="protection-stat-label">{t('violations')}</div>
							</div>
						</>
					}
				</div>
				{isOpen ? (
					<div className="protection-stat total-usage relative">
						<div className="stacked-bar-chart">
							<StackedBarChart data={data} />
						</div>
						<div className="protection-stat-total-info">
							<div
								className="font-bold"
							>
								{t('check')}: 777
							</div>
							<div
								className="font-bold text-[#f08c00]"
							>
								{t('violations')}: 777
							</div>
						</div>
					</div>
				) : (
					<div className="protection-stat total-usage">
						<div className="protection-stat-value">0</div>
						<div className="protection-stat-label">
							{t('size')}
						</div>
					</div>
				)}
			</div>
			<button
				className="protection-overview-switch cursor-pointer"
				onClick={() => {
					setIsOpen(!isOpen);
				}}
			>
				<svg
					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
				>
					<path
						fillRule="evenodd"
						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
						clipRule="evenodd"
					/>
				</svg>
			</button>
		</div>
	)
}