import type { TrashSection as TrashSectionType } from "@/types/dungeon";
import { MobCard } from "./MobCard";
import { QuickRefBanner } from "./QuickRefBanner";

interface TrashSectionProps {
  data: TrashSectionType;
  sectionId?: string;
}

export function TrashSection({ data, sectionId }: TrashSectionProps) {
  return (
    <section id={sectionId} className="mb-10 scroll-mt-4">
      <div className="relative mb-4 pl-4 text-2xl font-bold tracking-wide text-accent-purple">
        <span className="absolute left-0 top-[0.45em] size-2 rounded-full bg-accent-purple" />
        {data.header}
      </div>
      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
        {data.content.map((item, i) => {
          if (item.type === "quickRef") {
            return <QuickRefBanner key={i} data={item.data} />;
          }
          return <MobCard key={i} mob={item.data} />;
        })}
      </div>
    </section>
  );
}
