// components/main/system/SystemOverviewGrid.tsx
import React from "react";

type Props = {
  voltages: Record<string, number>;
  onOpenDetail: (key: string) => void;
};

export const SystemOverviewGrid = ({ voltages, onOpenDetail }: Props) => {
  const formatValue = (value: number) => value.toFixed(2);

  return (
    <div className="grid grid-cols-2 gap-4 mb-2">
      {Object.entries(voltages).map(([key, value]) => {
        const unit = key.includes("Temp") ? "\u00b0C" : "V";
        return (
          <div
            key={key}
            className="p-4 border rounded shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-[var(--color-border)] text-[var(--color-fg)] hover:bg-[var(--color-surface-alt)]/60 dark:hover:bg-[var(--color-surface-alt)]/30 transition"
          >
            <h2 className="font-semibold">{key}</h2>
            <p>
              {formatValue(value)} {unit}
              <button
                onClick={() => onOpenDetail(key)}
                className="ml-2 text-littwin-blue hover:underline text-sm"
              >
                Detailansicht
              </button>
            </p>
          </div>
        );
      })}
    </div>
  );
};