"use client";

import { DashboardEmptyState } from "@/components/dashboard-page";
import { useFlagsConfiguracion } from "@/hooks/use-flags-configuracion";
import type { FlagsConfiguracion } from "@/lib/api";
import { Ban } from "lucide-react";
import type { ReactNode } from "react";

export function FuncionNoHabilitada({ className }: { className?: string }) {
  return (
    <DashboardEmptyState
      icon={Ban}
      title="Función no habilitada para este taller"
      description="Esta función está apagada en la configuración de tu taller. Si la necesitás, pedile a un administrador que la active en Configuración."
      className={className}
    />
  );
}

// Mientras no hay dato ni caché (`listo` false) se renderiza el contenido: ocultar
// en falso es peor que mostrarlo un instante, y el backend rechaza igual.
export function RequiereFlag({
  flag,
  children,
}: {
  flag: keyof FlagsConfiguracion | Array<keyof FlagsConfiguracion>;
  children: ReactNode;
}) {
  const flags = useFlagsConfiguracion();
  const claves = Array.isArray(flag) ? flag : [flag];
  const habilitada = claves.some((clave) => flags[clave]);

  if (flags.listo && !habilitada) return <FuncionNoHabilitada />;
  return <>{children}</>;
}