"use client";

import { useEffect, useState } from "react";

type FeedItem = { name: string; bad: boolean };

const INITIAL: FeedItem[] = [
  { name: "chrome.exe", bad: false },
  { name: "invoice_0917.js", bad: true },
  { name: "Teams.exe", bad: false },
];

const ROTATION: FeedItem[] = [
  { name: "explorer.exe", bad: false },
  { name: "photoshop.exe", bad: false },
  { name: "free_movie.scr", bad: true },
  { name: "report.docx", bad: false },
  { name: "Spotify.exe", bad: false },
  { name: "macro_invoice.docm", bad: true },
  { name: "node.exe", bad: false },
  { name: "svchost.exe", bad: false },
  { name: "keygen.exe", bad: true },
];

export function HeroScanFeed() {
  const [rows, setRows] = useState(INITIAL);

  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    let f = 0;
    const id = window.setInterval(() => {
      const item = ROTATION[f++ % ROTATION.length];
      setRows((prev) => [item, ...prev].slice(0, 3));
    }, 2600);
    return () => window.clearInterval(id);
  }, []);

  return (
    <div className="console-feed" data-scan-feed>
      {rows.map((row, i) => (
        <div className="feed-row" key={`${row.name}-${i}`}>
          <span className={`st ${row.bad ? "bad" : "ok"}`}></span>
          <span className="nm">{row.name}</span>
          <em className={row.bad ? "bad" : ""}>{row.bad ? "Blocked" : "Safe"}</em>
        </div>
      ))}
    </div>
  );
}