'use client';

import { useState } from 'react';
import { MatrixRefresh } from '@/components/dot-matrix/refresh-entry';

export default function RefreshExample() {
  const [version, setVersion] = useState(0);
  const refresh = async (signal: AbortSignal) => {
    await new Promise<void>((resolve, reject) => {
      const abort = () => { clearTimeout(timer); reject(new DOMException('Cancelled', 'AbortError')); };
      const timer = setTimeout(() => { signal.removeEventListener('abort', abort); resolve(); }, 1200);
      if (signal.aborted) abort();
      else signal.addEventListener('abort', abort, { once: true });
    });
    if (!signal.aborted) setVersion(v => v + 1);
  };
  return <MatrixRefresh onRefresh={refresh} title="Field notes" subtitle="A few things worth keeping">
    <ul style={{ listStyle: 'none', padding: '0 20px', margin: 0 }}>
      {(version % 2 ? ['An unexpected rhythm', 'Small details, kept', 'Room for another idea'] : ['A quieter morning', 'Light through the window', 'The long way home']).map((title, i) =>
        <li key={title} style={{ display: 'flex', gap: 16, padding: '20px 0', borderBottom: i < 2 ? '1px solid color-mix(in srgb, currentColor 20%, transparent)' : undefined }}>
          <span aria-hidden style={{ fontVariantNumeric: 'tabular-nums' }}>0{i + 1}</span><span>{title}</span>
        </li>)}
    </ul>
  </MatrixRefresh>;
}