import type { BossSection as BossSectionType, Role } from "@/types/dungeon";
import { BossHeader } from "./BossHeader";
import { AbilityCard } from "./AbilityCard";

interface BossSectionProps {
  data: BossSectionType;
  activeRoles: Set<Role>;
  sectionId?: string;
}

export function BossSection({ data, activeRoles, sectionId }: BossSectionProps) {
  const filtered = data.abilities.filter((a) => activeRoles.has(a.role));

  return (
    <section id={sectionId} className="mb-12 scroll-mt-4">
      <BossHeader boss={data} />
      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
        {filtered.map((ability, i) => (
          <AbilityCard key={i} ability={ability} />
        ))}
      </div>
    </section>
  );
}
