// components/dashboards/KpiBottom.tsx
'use client';
import React, { ReactNode } from 'react';

type Props = {
  efficiencyPct: number;     // % value (0..100)
  powerFactor: number;       // 0..1
  loadFactor: number;        // ratio, not %
  middle?: ReactNode;
  right?: ReactNode;
};

const Panel = ({ title, children }: { title: string; children: ReactNode }) => (
  <div className="rounded-2xl p-5 shadow-md bg-white dark:bg-rtgray-800 text-white min-h-[260px] flex flex-col">
    <div className="text-lg font-bold opacity-80 mb-3">{title}</div>
    <div className="flex-1 grid place-items-center">{children}</div>
  </div>
);

const Stat = ({ value, label, accent = false }: { value: ReactNode; label: string; accent?: boolean }) => (
  <div className="flex flex-col items-center gap-1">
    <div className={`text-3xl font-semibold ${accent ? 'text-[#fcd913]' : 'text-white'}`}>{value}</div>
    <div className="text-xs text-[#9aa4b2]">{label}</div>
  </div>
);

export default function KpiBottom({
  efficiencyPct, powerFactor, loadFactor, middle, right,
}: Props) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
      <Panel title="Measurements">
        <div className="grid grid-cols-3 gap-3 w-full">
          <Stat value={`${efficiencyPct.toFixed(1)}%`} label="Efficiency" />
          <Stat value={powerFactor.toFixed(2)} label="Power Factor" />
          <Stat value={loadFactor.toFixed(2)} label="Load Factor" />
        </div>
      </Panel>

      <Panel title="Yield Bar Chart">
        <div className="w-full h-48">
          {middle}
        </div>
      </Panel>

      <Panel title="Peak Power Demand">
        <div className="text-3xl font-semibold">
          {right}
        </div>
      </Panel>
    </div>
  );
}