import type { MobCard as MobCardType } from "@/types/dungeon";

interface MobCardProps {
  mob: MobCardType;
}

export function MobCard({ mob }: MobCardProps) {
  return (
    <div
      className={`frost px-5 py-4 transition-colors hover:bg-bg-card-hover ${
        mob.tankRelevant ? "border-l-[3px] border-l-tank" : ""
      }`}
    >
      <div
        className="mb-2 text-xl font-bold text-accent-purple [&_span]:text-base [&_span]:text-accent-red"
        dangerouslySetInnerHTML={{ __html: mob.nameHtml }}
      />
      <ul className="m-0 list-none space-y-2.5 pl-0 text-lg leading-relaxed text-text-default">
        {mob.abilitiesHtml.map((html, i) => (
          <li
            key={i}
            className="relative pl-4 before:absolute before:left-0 before:top-[0.6em] before:h-1 before:w-1 before:rounded-full before:bg-text-muted before:content-[''] [&_a]:text-accent-cyan [&_a]:no-underline hover:[&_a]:underline"
            dangerouslySetInnerHTML={{ __html: html }}
          />
        ))}
      </ul>
    </div>
  );
}
