import { Droplets, Lightbulb, Power } from "lucide-react";
import type { DashboardOverview } from "../types/DashboardOverview";

type Props = {
  irrigation?: DashboardOverview["irrigation"];
  lighting?: DashboardOverview["lighting"];
};

export function DashboardOperationsSection({ irrigation, lighting }: Props) {
  return (
    <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
      <OperationCard
        title="Rega"
        value={`${irrigation?.activeValveCount ?? 0}`}
        subtitle={`válvulas ativas / ${irrigation?.controllerCount ?? 0} controladores`}
        icon={Droplets}
      />

      <OperationCard
        title="Bombas"
        value={`${irrigation?.activePumpCount ?? 0}`}
        subtitle="bombas ativas"
        icon={Power}
      />

      <OperationCard
        title="Iluminação"
        value={`${lighting?.activeSectorCount ?? 0}`}
        subtitle={`setores ativos / ${lighting?.sectorCount ?? 0} setores`}
        icon={Lightbulb}
      />
    </section>
  );
}

type OperationCardProps = {
  title: string;
  value: string;
  subtitle: string;
  icon: React.ElementType;
};

function OperationCard({ title, value, subtitle, icon: Icon }: OperationCardProps) {
  return (
    <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
      <div className="mb-4 flex items-center justify-between">
        <p className="text-sm text-slate-500 dark:text-slate-400">{title}</p>
        <Icon className="h-5 w-5 text-slate-400" />
      </div>

      <p className="text-3xl font-semibold text-slate-900 dark:text-slate-50">
        {value}
      </p>

      <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
        {subtitle}
      </p>
    </div>
  );
}