<script lang="ts">
  import type { Snippet } from "svelte";

  let {
    children,
    href,
    target,
    rel,
    class: className = "",
  }: {
    children?: Snippet;
    href?: string;
    target?: string;
    rel?: string;
    class?: string;
  } = $props();

  const base = "relative flex flex-col gap-2 rounded-lg border border-stein-200 bg-white p-4 shadow-sm min-w-0 overflow-hidden";
  const interactive = $derived(
    href ? "hover:border-stein-300 hover:shadow-md transition-all no-underline text-inherit" : "",
  );
</script>

{#if href}
  <a {href} {target} {rel} class="{base} {interactive} {className}">
    {@render children?.()}
  </a>
{:else}
  <div class="{base} {className}">
    {@render children?.()}
  </div>
{/if}
