Card

import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export type CardTone = "surface" | "primary" | "secondary" | "accent" | "ink";

const TONES: Record<CardTone, string> = {
  surface: "bg-da-surface text-da-surface-fg",
  primary: "bg-da-primary text-da-primary-fg",
  secondary: "bg-da-secondary text-da-secondary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  ink: "bg-da-fg text-da-bg",
};

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  tone?: CardTone;
  /** Adds the hard shadow + press-on-hover behaviour (use when the whole card is clickable). */
  interactive?: boolean;
  shadow?: "none" | "sm" | "md" | "lg";
}

export function Card({ tone = "surface", interactive = false, shadow = "md", className, ...props }: CardProps) {
  return (
    <div
      className={cn(
        "da-stroke flex flex-col",
        TONES[tone],
        shadow === "sm" && "shadow-da-sm",
        shadow === "md" && "shadow-da-md",
        shadow === "lg" && "shadow-da-lg",
        interactive &&
          "da-transition focus-within:translate-x-[3px] focus-within:translate-y-[3px] hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none",
        className,
      )}
      {...props}
    />
  );
}

export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex flex-col gap-1.5 p-5 sm:p-6", className)} {...props} />;
}

export function CardKicker({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn("font-da-mono text-[11px] font-bold tracking-da-label uppercase opacity-75", className)} {...props} />;
}

export function CardTitle({ className, as: Tag = "h3", ...props }: HTMLAttributes<HTMLHeadingElement> & { as?: "h2" | "h3" | "h4" }) {
  return <Tag className={cn("font-da-display text-xl leading-tight tracking-da-display uppercase", className)} {...props} />;
}

export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn("text-sm leading-relaxed opacity-80", className)} {...props} />;
}

export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex-1 px-5 pb-5 sm:px-6 sm:pb-6", className)} {...props} />;
}

export function CardFooter({ className, children, ...props }: HTMLAttributes<HTMLDivElement> & { children?: ReactNode }) {
  return (
    <div className={cn("flex items-center gap-3 border-t-[length:var(--da-border-width)] border-current px-5 py-4 sm:px-6", className)} {...props}>
      {children}
    </div>
  );
}

export default Card;