component ApiEndpointCard {
    props {
        class = ""
        method = "GET"
        path = "/api/example"
        eyebrow = ""
        title = ""
        description = ""
        href = ""
        actionLabel = "View endpoint"
    }

    view {
        <article
            class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
        >
            <div class="flex flex-wrap items-center gap-3" >
                <span
                    class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
                >
                    {method}
                </span>
                <code class="text-sm font-semibold">
                    {title || path}
                </code>
            </div>
            <p
                data-show="description"
                class="mt-3 text-sm text-slate-500"
            >
                {description}
            </p>
            <div class="mt-4">
                <slot />
            </div>
            {#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span></a>{/if}
        </article>
    }
}