import { ArrowRight } from '@phosphor-icons/react';

const PAIRS = [
  ['heic', 'jpg'],
  ['png', 'webp'],
  ['docx', 'pdf'],
  ['ttf', 'woff'],
  ['epub', 'mobi'],
  ['rar', 'zip'],
];

function Pill({ from, to }) {
  return (
    <span className="format-pill">
      <span>{from.toUpperCase()}</span>
      <ArrowRight size={12} weight="bold" />
      <span>{to.toUpperCase()}</span>
    </span>
  );
}

export function FormatMarquee() {
  return (
    <div className="format-marquee" aria-hidden="true">
      <div className="format-marquee-track">
        {[...PAIRS, ...PAIRS].map(([from, to], index) => (
          <Pill key={`${from}-${to}-${index}`} from={from} to={to} />
        ))}
      </div>
    </div>
  );
}