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-sm tabular-nums text-muted-foreground transition-colors hover:text-hover-neutral",
				className,
			)}
			style={{ width: 28, height: 32 }}
		>
			<svg
				viewBox="0 0 28 32"
				fill="none"
				stroke="currentColor"
				strokeWidth={1.5}
				strokeLinecap="round"
				strokeLinejoin="round"
				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 text-xs font-medium leading-none">
				{value !== undefined ? value : "\u2014"}
			</span>
		</button>
	);
}