import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Clock, LockKey, CloudArrowUp, HardDrives } from '@phosphor-icons/react';
import { fetchConfig } from '../api.js';

const ITEMS = [
  { key: 'autoDelete', Icon: Clock },
  { key: 'noAccount', Icon: LockKey },
  { key: 'online', Icon: CloudArrowUp },
  { key: 'maxSize', Icon: HardDrives },
];

export function ReassuranceStrip() {
  const { t } = useTranslation();
  const [config, setConfig] = useState(null);

  useEffect(() => {
    fetchConfig().then(setConfig).catch(() => {});
  }, []);

  if (!config) return null;

  const values = {
    autoDelete: config.retentionHours,
    maxSize: config.maxFileSizeMb,
  };

  return (
    <section className="reassurance">
      <h2>{t('reassurance.title')}</h2>
      <ul className="reassurance-list">
        {ITEMS.map(({ key, Icon }) => (
          <li key={key}>
            <span className="reassurance-icon">
              <Icon size={22} weight="regular" />
            </span>
            <span>{t(`reassurance.${key}`, { value: values[key] })}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}