import type { Method, Playbill } from "@proscenium/playbill";
import { AbilityCard } from "./ability";
import { Section } from "./base/section";

interface MethodSectionProps {
  method: Method;
  playbill: Playbill;
}

export function MethodSection({ method, playbill }: MethodSectionProps) {
  const ranks = method.abilities.map((rank, i) => {
    const gridTemplateColumns = new Array(Math.min(rank.length, 3))
      .fill("1fr")
      .join(" ");
    return (
      <div className="method-rank" key={i}>
        <h3>Rank {i + 1}</h3>
        <div className="method-rank-content" style={{ gridTemplateColumns }}>
          {rank.map((abilityId) => {
            const ability = playbill.abilities[abilityId];
            return <AbilityCard ability={ability} key={abilityId} />;
          })}
        </div>
      </div>
    );
  });

  return (
    <Section
      type="method"
      componentId={method.id}
      title={method.name}
      preInfo={<p className="method-curator">{method.curator}'s Method of</p>}
      info={
        <p
          className="method-description"
          dangerouslySetInnerHTML={{ __html: method.description }}
        />
      }
    >
      <div className="method-ranks">{ranks}</div>
    </Section>
  );
}