@namespace Lumeo.Docs.Shared
@using Lumeo.Docs.Services

@if (Component.HasDocsPage)
{
    <a href="components/@Component.Slug"
       class="group relative flex flex-col rounded-xl border border-border/40 bg-card overflow-hidden hover:border-primary/40 hover:shadow-sm transition-all">
        @if (!string.IsNullOrEmpty(Component.Thumbnail))
        {
            <div class="aspect-[16/9] w-full bg-muted/30 overflow-hidden">
                <img src="@Component.Thumbnail" alt="@Component.Name preview"
                     loading="lazy"
                     class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300" />
            </div>
        }
        else
        {
            <div class="catalog-card-icon-fallback aspect-[16/9] w-full bg-muted/30 flex items-center justify-center text-muted-foreground/40">
                <DynamicIcon Name="Box" Class="h-12 w-12" />
            </div>
        }
        @if (ShowNugetBadge)
        {
            <span class="absolute top-2 right-2 inline-flex items-center rounded-full bg-background/90 backdrop-blur-sm border border-border/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
                @Component.NugetPackage
            </span>
        }
        <div class="p-4 space-y-1">
            <h3 class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
                @Component.Name
            </h3>
            <p class="text-xs text-muted-foreground line-clamp-2">
                @Component.Description
            </p>
        </div>
    </a>
}
else
{
    @* Undocumented variant — rendered as a non-clickable div with a "Coming soon" badge.
       Component is real (registry entry exists) but no docs page yet.
       "Coming soon" takes precedence over the NuGet badge to avoid overlap. *@
    <div class="relative flex flex-col rounded-xl border border-border/40 bg-card overflow-hidden opacity-70"
         title="Documentation page coming soon">
        @if (!string.IsNullOrEmpty(Component.Thumbnail))
        {
            <div class="aspect-[16/9] w-full bg-muted/30 overflow-hidden">
                <img src="@Component.Thumbnail" alt="@Component.Name preview"
                     loading="lazy"
                     class="h-full w-full object-cover" />
            </div>
        }
        else
        {
            <div class="catalog-card-icon-fallback aspect-[16/9] w-full bg-muted/30 flex items-center justify-center text-muted-foreground/40">
                <DynamicIcon Name="Box" Class="h-12 w-12" />
            </div>
        }
        <span class="absolute top-2 right-2 inline-flex items-center rounded-full bg-background/90 backdrop-blur-sm border border-border/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
            Docs coming soon
        </span>
        <div class="p-4 space-y-1">
            <h3 class="text-sm font-semibold text-foreground">
                @Component.Name
            </h3>
            <p class="text-xs text-muted-foreground line-clamp-2">
                @Component.Description
            </p>
        </div>
    </div>
}

@code {
    [Parameter, EditorRequired] public RegistryComponent Component { get; set; } = null!;

    /// <summary>
    /// True when the component ships from a satellite package and has a docs page.
    /// Core "Lumeo" components are badge-free (most cards are core — no clutter).
    /// Undocumented components show "Docs coming soon" instead (never both).
    /// </summary>
    private bool ShowNugetBadge =>
        Component.HasDocsPage &&
        !string.IsNullOrEmpty(Component.NugetPackage) &&
        Component.NugetPackage != "Lumeo";
}
