package card

templ CardAccount(addr, name, handle, creationBlock string) {
	<div class="profile-card min-w-[320px]">
		<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-600 to-cyan-300 p-4 py-5 px-5 rounded-xl">
			<div class="flex justify-between">
				<div>
					<h2>sonr-testnet-1</h2>
					<p class="text-2xl font-bold">{ handle }</p>
				</div>
				<div class="flex items-center opacity-60">
					<sl-icon style="font-size: 52px;" library="sonr" name="sonr-fill"></sl-icon>
				</div>
			</div>
			<div class="mt-5 flex justify-between items-center w-52">
				<span class="text-lg font-mono">{ shortenAddress(addr) }</span>
			</div>
			<div class="flex justify-between mt-5 w-48 ">
				<div>
					<h3 class="text-xs">Block Created </h3>
					<p class="font-bold"><span>#</span>{ creationBlock }</p>
				</div>
				<div>
					<h3 class="text-xs">Issued to</h3>
					<p class="font-bold">{ name }</p>
				</div>
			</div>
		</div>
	</div>
}

// Helper function to shorten address
func shortenAddress(address string) string {
	if len(address) <= 20 {
		return address
	}
	return address[:16] + "..." + address[len(address)-4:]
}