"use client";

/**
 * Small shared card used by card-style blocks (bookmark fallback,
 * table-of-contents entries, link-to-page previews, database previews).
 *
 * Kept deliberately generic: icon + title + meta + optional action, with a
 * hover affordance and an optional onClick for the whole card.
 */
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface BlockCardProps {
  icon?: ReactNode;
  title: string;
  meta?: string;
  description?: string;
  href?: string;
  onClick?: () => void;
  /** Render as a link card (external styling) vs. an action card. */
  variant?: "link" | "action";
  className?: string;
  children?: ReactNode;
}

export function BlockCard({
  icon,
  title,
  meta,
  description,
  href,
  onClick,
  variant = "action",
  className,
  children
}: BlockCardProps) {
  const body = (
    <>
      {icon ? (
        <span
          className={cn(
            "flex size-9 shrink-0 items-center justify-center rounded-md",
            variant === "link" ? "bg-muted" : "bg-primary/10"
          )}
          aria-hidden
        >
          {icon}
        </span>
      ) : null}
      <span className="min-w-0 flex-1">
        <span className="block truncate text-sm font-medium">{title}</span>
        {meta ? <span className="block truncate text-xs text-muted-foreground">{meta}</span> : null}
        {description ? (
          <span className="mt-0.5 line-clamp-2 block text-xs text-muted-foreground/80">{description}</span>
        ) : null}
      </span>
      {children}
    </>
  );

  const classes = cn(
    "group/card flex w-full gap-3 rounded-md border border-border p-3 text-left transition-colors",
    variant === "link" ? "bg-card hover:bg-accent/50" : "bg-card hover:border-ring/60",
    className
  );

  if (href) {
    const external = href.startsWith("http");
    return (
      <a
        href={href}
        className={classes}
        {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
      >
        {body}
      </a>
    );
  }

  return (
    <button type="button" onClick={onClick} className={cn(classes, "text-left disabled:opacity-50")}>
      {body}
    </button>
  );
}