<script lang="ts">
	let {
		message,
		onretry,
	}: {
		message: string;
		onretry?: () => void;
	} = $props();
</script>

<div class="saas-card flex flex-wrap items-start gap-3 border-error-200 bg-error-50 p-4 text-error-700">
	<svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
		<path
			stroke-linecap="round"
			stroke-linejoin="round"
			d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
		/>
	</svg>
	<div class="min-w-0 flex-1">
		<p class="text-sm font-medium">请求失败</p>
		<p class="mt-0.5 text-sm opacity-90">{message}</p>
	</div>
	{#if onretry}
		<button type="button" class="saas-btn-ghost text-sm" onclick={onretry}>重试</button>
	{/if}
</div>
