<script lang="ts">
  import type {Snippet} from "svelte"
  import {fly} from "@lib/transition"
  import Icon from "@lib/components/Icon.svelte"

  type Props = {
    icon?: string
    title: string
    children?: Snippet
    action?: Snippet
  }

  const {icon, title, children, action}: Props = $props()
</script>

<div
  class="m-auto flex max-w-sm flex-col items-center gap-3 px-4 py-12 text-center"
  in:fly={{y: 16}}>
  {#if icon}
    <div class="bg-primary/10 text-primary center size-16 rounded-full motion-safe:animate-float">
      <Icon {icon} size={8} />
    </div>
  {/if}
  <h3 class="font-display text-xl font-bold tracking-tight">{title}</h3>
  {#if children}
    <p class="text-sm opacity-70">{@render children?.()}</p>
  {/if}
  {#if action}
    <div class="mt-1">{@render action?.()}</div>
  {/if}
</div>
