// 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-8">
      {Object.entries(voltages).map(([key, value]) => {
        const unit = key.includes("Temp") ? "°C" : "V";
        return (
          <div key={key} className="p-4 border rounded shadow">
            <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>
  );
};
