import { useI18n } from '../hooks/useI18n';
import type { ChangelogEntry } from '../types';

interface ChangelogListProps {
  changelog: ChangelogEntry[];
}

export default function ChangelogList({ changelog }: ChangelogListProps) {
  const { biArray } = useI18n();

  return (
    <div className="changelog-list">
      {changelog.map((entry, i) => {
        const changes = biArray(entry.changes);
        return (
          <details key={`${entry.version}-${i}`} className="changelog-entry" open={i === 0}>
            <summary className="changelog-summary">
              <span className="changelog-version">{entry.version}</span>
              <span className="changelog-date">{entry.date}</span>
              <span className="changelog-count">{changes.length}</span>
            </summary>
            {changes.length > 0 && (
              <ul className="changelog-changes">
                {changes.map((change, j) => (
                  <li key={j}>{change}</li>
                ))}
              </ul>
            )}
          </details>
        );
      })}
    </div>
  );
}
