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

interface BossHeaderProps {
  boss: BossSection;
}

export function BossHeader({ boss }: BossHeaderProps) {
  return (
    <div className="frost mb-5 flex items-center gap-5 border-l-[4px] border-l-accent-blue px-6 py-5">
      <img
        src={boss.image}
        alt={boss.name}
        className="aspect-square w-20 shrink-0 border border-frost-border object-cover"
      />
      <div>
        <div className="text-base font-bold uppercase tracking-wider text-accent-blue">
          {boss.bossNumber}
        </div>
        <h2 className="mb-0.5 text-4xl font-bold text-text-default">
          {boss.name}
        </h2>
        <div className="text-lg text-text-muted">{boss.subtitle}</div>
      </div>
    </div>
  );
}
