"use client";

import { PoolManager } from "./PoolManager";
import { addPoolValue, removePoolValue } from "@/app/admin/impostazioni/actions";

export function OfferPoolsSection({
  tipoPool,
  obiettivoPool,
  categoriaPool,
}: {
  tipoPool: string[];
  obiettivoPool: string[];
  categoriaPool: string[];
}) {
  return (
    <div className="bg-white rounded-xl border border-[#e5e7eb] p-6">
      <h2 className="text-base font-semibold text-[#1a1a1a] mb-1">Categorie Offerta</h2>
      <p className="text-xs text-[#71717a] mb-5">
        Valori disponibili nei campi Tipo, Obiettivo e Categoria dell&apos;editor offerte.
      </p>
      <div className="flex flex-wrap gap-6">
        <PoolManager
          label="Tipo offerta"
          pool={tipoPool}
          onAdd={(v) => addPoolValue("tipo", v)}
          onRemove={(v) => removePoolValue("tipo", v)}
        />
        <PoolManager
          label="Obiettivo"
          pool={obiettivoPool}
          onAdd={(v) => addPoolValue("obiettivo", v)}
          onRemove={(v) => removePoolValue("obiettivo", v)}
        />
        <PoolManager
          label="Categoria"
          pool={categoriaPool}
          onAdd={(v) => addPoolValue("categoria", v)}
          onRemove={(v) => removePoolValue("categoria", v)}
        />
      </div>
    </div>
  );
}