import FilesTable from '@/app/ui/dashboard/files-table';
import UploadSectionFile from '@/app/components/upload-section-file';
import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
import ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic';
import ProtectionSummary from '@/app/ui/marking-page/protection-summary';

const data = [
	{
		name: 'File A',
		checks: 4,
		violations: 2
	},
	{
		name: 'File B',
		checks: 8,
		violations: 4
	},
	{
		name: 'File C',
		checks: 2,
		violations: 1
	},
	{
		name: 'File D',
		checks: 7,
		violations: 1
	},
	{
		name: 'File E',
		checks: 5,
		violations: 4
	},
];

export default async function Page() {
	const FILE_TYPE = "image";
	const { file_extension, max_file_size } = await getAllowedFilesExtensions(FILE_TYPE);

	return (
		<div>
			<PageTitleColorFrame
				title="image-protection"
				description="multi-layered-protection-for-your-images"
			/>
			<ProtectionStatistic fileType={FILE_TYPE}/>
			{/* <div className="split-blocks">
				<ProtectionSummary fileType={FILE_TYPE} />
				<div className="protection-overview">
					<StackedBarChart data={data} />
				</div>
			</div> */}
			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
			<FilesTable fileType={FILE_TYPE} />
		</div>
	)
}