no-copy-frontend/src/app/ui/search/supported-formats.tsx

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

interface supportedFormats {
	extensionVideo: string[]
	extensionAudio: string[]
	extensionImage: string[]
	extensionDocument: string[]
}

export function SupportedFormats({ extensionVideo, extensionAudio, extensionImage, extensionDocument }: supportedFormats) {
	const t = useTranslations('Global');

	return (
		<div className="supported-formats">
			<div className="formats-title">
				Поддерживаемые форматы
			</div>

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

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

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

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