"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * The content surface. `"card rounded-panel p-5"` was copy-pasted across eight
 * files with the padding drifting between p-3, p-3.5, p-4 and p-5; this fixes
 * the scale in one place.
 */
export function Card({
  className,
  pad = "md",
  interactive,
  ...props
}: React.HTMLAttributes<HTMLDivElement> & {
  pad?: "none" | "sm" | "md" | "lg";
  interactive?: boolean;
}) {
  return (
    <div
      className={cn(
        "card rounded-panel",
        { none: "", sm: "p-3", md: "p-4", lg: "p-5 sm:p-6" }[pad],
        interactive && "lift cursor-pointer",
        className,
      )}
      {...props}
    />
  );
}

export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("mb-3 flex items-center justify-between gap-3", className)} {...props} />;
}

export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
  return <h2 className={cn("text-headline", className)} {...props} />;
}

export function CardNote({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn("text-callout text-dim", className)} {...props} />;
}