import type { DungeonData } from "@/types/dungeon";

interface DungeonHeaderProps {
  dungeon: DungeonData;
}

export function DungeonHeader({ dungeon }: DungeonHeaderProps) {
  return (
    <div className="frost mb-10 flex flex-row items-center gap-6 p-6">
      <img
        src={dungeon.headerImage}
        alt={dungeon.name}
        className="aspect-square w-28 shrink-0 border border-frost-border object-cover"
      />
      <div>
        <h1 className="mb-1 text-5xl font-bold text-text-default">
          {dungeon.name}
        </h1>
        <p
          className="text-xl text-text-muted"
          dangerouslySetInnerHTML={{ __html: dungeon.descriptionHtml }}
        />
      </div>
    </div>
  );
}
