import { useTranslation } from 'react-i18next';
import { Image, FileText, TextAa, BookOpen, Archive } from '@phosphor-icons/react';
import { FORMAT_FAMILIES } from '../data/formats.js';

const FAMILY_ICONS = {
  images: Image,
  documents: FileText,
  fonts: TextAa,
  ebooks: BookOpen,
  archives: Archive,
};

export function FormatsGrid() {
  const { t } = useTranslation();
  return (
    <section className="formats-grid-section">
      <h2>{t('formats.title')}</h2>
      <div className="formats-grid">
        {FORMAT_FAMILIES.map(({ key, formats }) => {
          const Icon = FAMILY_ICONS[key];
          return (
            <div key={key} className="formats-family" style={{ '--tile-color': `var(--color-family-${key})` }}>
              <span className="formats-family-icon">
                <Icon size={22} weight="regular" />
              </span>
              <h3>{t(`formats.${key}`)}</h3>
              <p>{formats.join(', ').toUpperCase()}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}