initiative/apps/web/src/components/equipment-detail-popover.tsx

import type { EquipmentItem } from "@initiative/domain";
import { DetailPopover } from "./detail-popover.js";
import { RichDescription } from "./rich-description.js";

interface EquipmentDetailPopoverProps {
	readonly item: EquipmentItem;
	readonly anchorRect: DOMRect;
	readonly onClose: () => void;
}

function EquipmentDetailContent({ item }: Readonly<{ item: EquipmentItem }>) {
	return (
		<div className="space-y-2 text-sm">
			<h3 className="font-bold text-lg text-stat-heading">{item.name}</h3>
			{item.traits && item.traits.length > 0 && (
				<div className="flex flex-wrap gap-1">
					{item.traits.map((t) => (
						<span
							key={t}
							className="rounded border border-border bg-card px-1.5 py-0.5 text-foreground text-xs"
						>
							{t}
						</span>
					))}
				</div>
			)}
			<div className="space-y-0.5 text-xs">
				<div>
					<span className="font-semibold">Level</span> {item.level}
				</div>
				{item.category ? (
					<div>
						<span className="font-semibold">Category</span>{" "}
						{item.category.charAt(0).toUpperCase() + item.category.slice(1)}
					</div>
				) : null}
				{item.spellName ? (
					<div>
						<span className="font-semibold">Spell</span> {item.spellName}
						{item.spellRank === undefined ? "" : ` (Rank ${item.spellRank})`}
					</div>
				) : null}
			</div>
			{item.description ? (
				<RichDescription
					text={item.description}
					className="whitespace-pre-line text-foreground"
				/>
			) : (
				<p className="text-muted-foreground italic">
					No description available.
				</p>
			)}
		</div>
	);
}

export function EquipmentDetailPopover({
	item,
	anchorRect,
	onClose,
}: Readonly<EquipmentDetailPopoverProps>) {
	return (
		<DetailPopover
			anchorRect={anchorRect}
			onClose={onClose}
			ariaLabel={`Equipment details: ${item.name}`}
		>
			<EquipmentDetailContent item={item} />
		</DetailPopover>
	);
}