<script lang="ts">
  import type { Snippet } from "svelte";
  import { cva, type VariantProps } from "class-variance-authority";

  /**
   * tile + stack/inline: Org-Karten (Padding im Shell).
   * tile + post: PostCard – Shell ohne Padding, Medien bündig, Text mit p-4 im Kind.
   * callout: CTA; layout wird ignoriert.
   */
  const cardSurface = cva("relative min-w-0 overflow-hidden", {
    variants: {
      variant: {
        tile: "",
        callout:
          "flex flex-col gap-1.5 border border-dashed border-wald-300 bg-wald-50 p-3",
      },
      layout: {
        stack: "",
        inline: "",
        post: "",
      },
    },
    compoundVariants: [
      {
        variant: "tile",
        layout: "stack",
        class:
          "flex flex-col gap-2 border border-gray-200 bg-white p-4 text-slate-950",
      },
      {
        variant: "tile",
        layout: "inline",
        class:
          "flex flex-row items-start gap-3 border border-gray-200 bg-white p-4 text-slate-950",
      },
      {
        variant: "tile",
        layout: "post",
        class:
          "flex flex-col gap-0 border border-gray-200 bg-white p-0 text-slate-950",
      },
    ],
    defaultVariants: { variant: "tile", layout: "stack" },
  });

  const cardAsLink = cva("", {
    variants: {
      variant: {
        callout: "cursor-pointer transition-all no-underline text-inherit",
        tile: "transition-all no-underline hover:border-gray-300",
      },
    },
    defaultVariants: { variant: "tile" },
  });

  type SurfaceProps = VariantProps<typeof cardSurface>;
  type CardLinkVariant = NonNullable<SurfaceProps["variant"]>;

  let {
    children,
    href,
    target,
    rel,
    variant = "tile",
    layout = "stack",
    class: className = "",
  }: {
    children?: Snippet;
    href?: string;
    target?: string;
    rel?: string;
    class?: string;
  } & SurfaceProps = $props();

  const surface = $derived(cardSurface({ variant, layout }));
  const linkSurface = $derived(
    href ? cardAsLink({ variant: (variant ?? "tile") as CardLinkVariant }) : "",
  );
</script>

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