import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChartSimple } from "@fortawesome/free-solid-svg-icons";

type StatusReadsProps = {
  reads: {
    totalPending: number;
    totalActive: number;
    totalSent: number;
    totalReceived: number;
    totalLost: number;
    sanityCheck: boolean;
    sanityCheckFormula: string;
  };
  isReadsLoading?: boolean;
};

const StatusReads = ({ reads, isReadsLoading }: StatusReadsProps) => {
  const totalPending = reads?.totalPending ?? 0;
  const totalActive = reads?.totalActive ?? 0;
  const totalSent = reads?.totalSent ?? 0;
  const totalLost = reads?.totalLost ?? 0;
  const totalReceived = reads?.totalReceived ?? 0;

  if (isReadsLoading) {
    return <p className="text-slate-400">Loading reads…</p>;
  }
  return (
    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
      <div className="flex flex-row gap-2 items-center">
        <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
          <FontAwesomeIcon icon={faChartSimple} />
        </span>

        <p className="text-lg">Reads</p>
      </div>

      <div className="text-slate-400 mt-1">
        Pending: <span className="text-yellow-500">{totalPending}</span> | Active:{" "}
        <span className="text-cyan-500">{totalActive}</span> | Lost: <span className="text-red-500">{totalLost}</span>
        <br />
        Sent / Received: <span className="text-blue-500">{totalSent}</span> |{" "}
        <span className="text-green-500">{totalReceived}</span>
      </div>
    </div>
  );
};

export default StatusReads;