import type { AbilityCard as AbilityCardType } from "@/types/dungeon";
import { RoleBadge } from "./RoleBadge";

const borderColors: Record<string, string> = {
  "tank-important": "border-l-tank",
  "healer-important": "border-l-healer",
  "everyone-important": "border-l-everyone",
};

interface AbilityCardProps {
  ability: AbilityCardType;
}

export function AbilityCard({ ability }: AbilityCardProps) {
  const leftBorder = ability.importance
    ? `border-l-[3px] ${borderColors[ability.importance] || ""}`
    : "";

  return (
    <div
      className={`frost px-5 py-4 transition-colors hover:bg-bg-card-hover ${leftBorder}`}
    >
      <div className="mb-1.5 flex items-center gap-3">
        {ability.wowheadUrl ? (
          <a
            href={ability.wowheadUrl}
            className="text-xl font-bold text-accent-cyan no-underline hover:underline"
          >
            {ability.name}
          </a>
        ) : (
          <span className="text-xl font-bold text-accent-cyan">
            {ability.name}
          </span>
        )}
        <RoleBadge role={ability.role} />
      </div>
      <div
        className="text-lg leading-relaxed text-text-default [&_a]:text-accent-cyan [&_a]:no-underline hover:[&_a]:underline [&_li]:mb-2.5 [&_li:last-child]:mb-0 [&_ul]:m-0 [&_ul]:list-disc [&_ul]:pl-5"
        dangerouslySetInnerHTML={{ __html: ability.descriptionHtml }}
      />
    </div>
  );
}
