import { useState } from "preact/hooks";

export default function ChannelSwitcher({ sets = [] }) {
  const [activeId, setActiveId] = useState(sets[0]?.id);

  const active = sets.find((x) => x.id === activeId);
  const iframeSrc = `https://www.jambox.pl/iframe-pakiet-logo?p=${active?.p}`;

  return (
    <div class="w-full">
      <div class="flex justify-center mb-10">
        <div class="fuz-switch-group">
          {sets.map((s) => (
            <button
              type="button"
              class={`fuz-switch ${activeId === s.id ? "active" : ""}`}
              onClick={() => setActiveId(s.id)}
            >
              {s.name}
            </button>
          ))}
        </div>
      </div>

      {/* 🔹 Iframe */}
      <div class="w-full">
        <div class="fuz-iframe-wrapper">
          <iframe
            title="Lista kanałów"
            src={iframeSrc}
            class="fuz-iframe"
            loading="lazy"
          ></iframe>
        </div>
      </div>

    </div>
  );
}
