Artifacts

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface RecordRowProps {
  href: string;
  id?: string;
  title: string;
  description?: string;
  meta?: React.ReactNode;
  badges?: React.ReactNode;
  className?: string;
}

/** A single tappable row in a list — the core Linear-style line item. */
export function RecordRow({
  href,
  id,
  title,
  description,
  meta,
  badges,
  className,
}: RecordRowProps) {
  return (
    <Link
      href={href}
      className={cn(
        "group flex items-center gap-4 px-4 py-3.5 transition-colors hover:bg-secondary/60",
        className,
      )}
    >
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2.5">
          {id && (
            <span className="font-mono text-xs font-medium text-muted-foreground">
              {id}
            </span>
          )}
          <span className="truncate text-[14px] font-medium text-foreground">
            {title}
          </span>
        </div>
        {description && (
          <p className="mt-0.5 truncate text-[13px] text-muted-foreground">
            {description}
          </p>
        )}
      </div>
      {badges && <div className="hidden shrink-0 items-center gap-2 sm:flex">{badges}</div>}
      {meta && <div className="hidden shrink-0 sm:block">{meta}</div>}
      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground/40 transition-colors group-hover:text-foreground" />
    </Link>
  );
}

/** A bordered container that groups RecordRow children with dividers. */
export function RecordList({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn("overflow-hidden rounded-lg border border-border bg-card divide-y divide-border", className)}>
      {children}
    </div>
  );
}