Card Link Row

"use client"

import * as React from "react"
import { useRender } from "@base-ui/react/use-render"
import { IconChevronRight as ChevronRight } from "@tabler/icons-react"

import { cn } from "@/registry/lib/utils"
import { Badge } from "@/registry/ui/badge"

// @use-when a row in a card that links somewhere, often with a count of what is
// waiting there: a "needs attention" list on a home screen (4 orders to fulfil,
// 3 refund requests), shortcuts to a record's related pages. Not CardRow, which
// only displays, and not Nav, which is the app's own navigation.
function CardLinkRow({
  className,
  render,
  count,
  description,
  children,
  ...props
}: useRender.ComponentProps<"a"> & {
  /** What is waiting at the link, as a number. Hidden at 0, since a row
   *  promising nothing is a row to leave out. */
  count?: number
  /** One line under the label, in the description grey. */
  description?: React.ReactNode
}) {
  return useRender({
    render: render ?? <a />,
    props: {
      "data-slot": "card-link-row",
      // CardRow's geometry (px-4, the row border) so a card can mix the two.
      // The hover is the neutral tint `subtle` buttons use: `bg-muted` would
      // vanish on a card in dark mode.
      className: cn(
        "flex min-h-14 items-center gap-4 border-b border-border px-4 py-3 last:border-0",
        "cursor-pointer outline-none transition-colors duration-small ease-small hover:bg-neutral-500/10",
        "focus-visible:ring-[3px] focus-visible:ring-ring-focus focus-visible:ring-inset",
        className
      ),
      ...props,
      children: (
        <>
          <span className="flex min-w-0 flex-1 flex-col gap-(--spacing-rhythm-pair)">
            <span className="truncate text-sm font-medium text-foreground">{children}</span>
            {description ? (
              <span className="truncate text-xs text-muted-foreground">{description}</span>
            ) : null}
          </span>
          {count ? (
            <Badge variant="muted" size="sm" className="tabular-nums">
              {count}
            </Badge>
          ) : null}
          <ChevronRight aria-hidden className="size-icon shrink-0 text-subtle-foreground" />
        </>
      ),
    },
  })
}

export { CardLinkRow }