// components/KpiTop.tsx
import React from "react";

type Props = {
  month?: string;
  yieldKwh: number;
  consumptionKwh: number;
  gridDrawKwh: number;
};

const Card: React.FC<{ title: string; value: string; accent?: boolean; icon?: React.ReactNode }> = ({
  title,
  value,
  accent,
  icon,
}) => (
  <div
    className={`rounded-xl p-4 md:p-5 shadow-sm
      ${accent 
        ? "bg-[#fcd913] text-black" 
        : "bg-white text-gray-900 dark:bg-rtgray-800 dark:text-white"}`}
  >
    <div className="flex items-center gap-3">
      <div className="shrink-0 text-black dark:text-white">
        {icon}
      </div>
      <div className="flex-1">
        <div className="text-lg font-bold opacity-80">{title}</div>
        <div className="text-2xl font-semibold">{value}</div>
      </div>
    </div>
  </div>
);


export default function KpiTop({ month, yieldKwh, consumptionKwh, gridDrawKwh }: Props) {
  return (
    <section aria-label="Top KPIs" className="space-y-3">
      {month && <div className="text-xs dark:text-[#9aa4b2]">{month}</div>}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <Card
          title="Monthly Yield"
          value={`${yieldKwh.toLocaleString()} kWh`}
          icon={
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <circle cx="12" cy="12" r="4" stroke="#fcd913" strokeWidth="2" />
              <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" stroke="#fcd913" strokeWidth="2" />
            </svg>
          }
        />
        <Card
          title="Monthly Consumption"
          value={`${consumptionKwh.toLocaleString()} kWh`}
          icon={
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <rect x="8" y="3" width="8" height="12" rx="2" stroke="currentColor" strokeWidth="2" />
              <path d="M12 15v6" stroke="#fcd913" strokeWidth="2" />
            </svg>
          }
        />
        <Card
          title="Monthly Grid Draw"
          value={`${gridDrawKwh.toLocaleString()} kWh`}
          icon={
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
              <path d="M5 21h14M7 21l5-18 5 18" stroke="currentColor" strokeWidth="2" />
              <path d="M14 8l2 2" stroke="#fcd913" strokeWidth="2" />
            </svg>
          }
        />
      </div>
    </section>
  );
}