import { cn } from "../lib/utils";

interface AcShieldProps {
	readonly value: number | undefined;
	readonly onClick?: () => void;
	readonly className?: string;
}

export function AcShield({ value, onClick, className }: AcShieldProps) {
	return (
		<button
			type="button"
			onClick={onClick}
			className={cn(
				"relative inline-flex items-center justify-center text-muted-foreground text-sm tabular-nums transition-colors hover:text-hover-neutral",
				className,
			)}
			style={{ width: 28, height: 32 }}
		>
			<svg
				viewBox="0 0 28 32"
				fill="var(--color-border)"
				fillOpacity={0.5}
				stroke="none"
				className="absolute inset-0 h-full w-full"
				aria-hidden="true"
			>
				<path d="M14 1.5 L2.5 6.5 L2.5 15 Q2.5 25 14 30.5 Q25.5 25 25.5 15 L25.5 6.5 Z" />
			</svg>
			<span className="relative -mt-0.5 font-medium text-xs leading-none">
				{value == null ? "\u2014" : String(value)}
			</span>
		</button>
	);
}
