import type { HTMLAttributes, ReactNode } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  hover?: boolean;
  padding?: "none" | "sm" | "md" | "lg";
  highlighted?: boolean;
}

const PADDING: Record<NonNullable<CardProps["padding"]>, string> = {
  none: "",
  sm: "p-4",
  md: "p-5",
  lg: "p-8",
};

/** Standard surface card — the base container used across app + settings + marketing. */
export function Card({ children, hover, padding = "md", highlighted, className, ...rest }: CardProps) {
  return (
    <div
      className={[
        "bg-surface border rounded-xl",
        highlighted ? "border-accent/40 shadow-glow" : "border-line",
        hover ? "transition-colors hover:border-line-strong" : "",
        PADDING[padding],
        className ?? "",
      ]
        .filter(Boolean)
        .join(" ")}
      {...rest}
    >
      {children}
    </div>
  );
}

export function CardHeader({ title, subtitle, action }: { title: ReactNode; subtitle?: ReactNode; action?: ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-4 mb-4">
      <div className="min-w-0">
        <h3 className="text-ink font-semibold text-sm">{title}</h3>
        {subtitle && <p className="text-ink-muted text-xs mt-0.5 leading-snug">{subtitle}</p>}
      </div>
      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}