'use client'

import { FileDetails } from '@/app/[locale]/pages/file/[id]/page';
import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
import { useEffect } from 'react';

export default function FilenPageFileInfo({ fileInfo }: { fileInfo: FileDetails }) {
	const t = useTranslations('Global');

	return (
		<div
			className="block-wrapper"
		>
			<div className="content-card">
				<div className="card-header">
					<h3 className="card-title">
						{t('file-information')}
					</h3>
				</div>

				<div className="info-row">
					<span className="info-label">
						ID
					</span>
					<span className="info-value">
						{fileInfo ? fileInfo.supportId : '#'}
					</span>
				</div>
				<div className="info-row">
					<span className="info-label">
						{t('file-type')}
					</span>
					<span className="info-value">
						{fileInfo ? fileInfo.mimeType : '#'}
					</span>
				</div>
				<div className="info-row">
					<span className="info-label">
						{t('size')}
					</span>
					<span className="info-value">{fileInfo ? convertBytes(fileInfo.fileSize) : '#'}</span>
				</div>
				<div className="info-row">
					<span className="info-label">
						{t('loaded')}
					</span>
					<span className="info-value">
						{fileInfo ? formatDate(fileInfo.createdAt) : '#'}
					</span>
				</div>
				<div className="info-row">
					<span className="info-label">
						{t('monitoring')}
					</span>
					<span className="info-value">
						{fileInfo ? fileInfo.monitoring : '#'}
					</span>
				</div>
			</div>
		</div>
	)
}