import type { PublicAuditScreenshot as PublicAuditScreenshotData } from "@/lib/audits/public-audit-types";

type PublicAuditScreenshotProps = {
  screenshot: PublicAuditScreenshotData;
};

export function PublicAuditScreenshot({ screenshot }: PublicAuditScreenshotProps) {
  return (
    <figure className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={screenshot.url}
        alt={screenshot.alt}
        width={screenshot.width}
        height={screenshot.height}
        className="aspect-[16/10] w-full object-cover"
      />
      <figcaption className="flex items-center justify-between gap-3 border-t border-slate-200 px-4 py-3 text-xs text-slate-600">
        <span className="font-medium uppercase tracking-normal text-slate-700">
          {screenshot.viewport === "desktop" ? "Desktop" : "Mobil"}
        </span>
        <span className="truncate">{screenshot.sourceUrl}</span>
      </figcaption>
    </figure>
  );
}