"use client";

import { useState } from "react";
import Toggle from "@/app/Components/Global/Toggle/Toggle";
import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
import PorServicios from "@/app/Components/Reportes/porServicio";
import PorRecibos from "@/app/Components/Reportes/porRecibo";

export default function ReportesClient({
  defaultKey,
}: {
  defaultKey?: string;
}) {
  const [desde, setDesde] = useState<string | null>(null);
  const [hasta, setHasta] = useState<string | null>(null);

  return (
    <section className="containerSection">
      <h2 className="title">REPORTES</h2>

      <Toggle
        defaultView={defaultKey}
        options={[
          {
            key: "Por recibo",
            label: "Por recibo",
            content: (
              <>
                <SearchDateBetween
                  onSearch={(d, h) => {
                    setDesde(d);
                    setHasta(h);
                  }}
                />
                <PorRecibos desde={desde} hasta={hasta} />
              </>
            ),
          },
          {
            key: "Por Servicio",
            label: "Por Servicio",
            content: (
              <>
                <SearchDateBetween
                  onSearch={(d, h) => {
                    setDesde(d);
                    setHasta(h);
                  }}
                />
                <PorServicios desde={desde} hasta={hasta} />
              </>
            ),
          },
        ]}
      />
    </section>
  );
}