'use client';

import { useState } from 'react';

/**
 * The panel, at a readable size.
 *
 * Rendered by the same code path that serves the device, so this is not an
 * impression of the screen: it is the screen. `key` is bumped to defeat the
 * browser cache when the data behind it has just changed.
 */
export default function ScreenPreview({ className = '' }: { className?: string }) {
  const [nonce, setNonce] = useState(() => Date.now());

  return (
    <figure className={className}>
      <div className="overflow-hidden rounded-[var(--radius-md)] border border-[var(--line-strong)] bg-white">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          key={nonce}
          src={`/api/admin/preview?t=${nonce}`}
          alt="Aperçu de l’écran de la vitrine"
          width={800}
          height={480}
          className="block h-auto w-full"
        />
      </div>
      <figcaption className="mt-2 flex flex-wrap items-center gap-3 text-xs text-[var(--ink-muted)]">
        <span>800 × 480, noir et blanc — rendu réellement envoyé à l’écran.</span>
        <button
          type="button"
          onClick={() => setNonce(Date.now())}
          className="underline-offset-2 hover:underline"
        >
          Rafraîchir
        </button>
      </figcaption>
    </figure>
  );
}