'use client'

import { IconImageFile, IconVideoFile, IconAudioFile, IconDocument } from '@/app/ui/icons/icons';
import { useTranslations } from 'next-intl';
import { useAllFilesExtensions } from '@/app/hooks/react-query/useAllFilesExtensions';

export function SupportedFormats() {
	const t = useTranslations('Global');

	const { data: allFilesExtensions, isLoading, isError } = useAllFilesExtensions();

	return (
		<div className="supported-formats">
			<div className="formats-title">
				{t('supported-formats')}
			</div>

			<div className="format-group">
				<div className="format-type image">
					<IconImageFile /> {t('images')}
				</div>
				<div className="format-list">
					{allFilesExtensions?.images?.join(', ')}
				</div>
			</div>

			<div className="format-group">
				<div className="format-type video">
					<IconVideoFile /> {t('videos')}
				</div>
				<div className="format-list">
					{allFilesExtensions?.videos?.join(', ')}
				</div>
			</div>

			<div className="format-group">
				<div className="format-type audio">
					<IconAudioFile /> {t('audios')}
				</div>
				<div className="format-list">
					{allFilesExtensions?.audios?.join(', ')}
				</div>
			</div>

			<div className="format-group">
				<div className="format-type document">
					<IconDocument /> {t('documents')}
				</div>
				<div className="format-list">
					{allFilesExtensions?.documents?.join(', ')}
				</div>
			</div>
		</div>
	)
}