/**
 * Card - the surface container.
 *
 * Default = the plain card shell (card background, radius md, soft shadow
 * in light theme / hairline border in dark, overflow hidden). Two opt-in layers:
 *   - accentBar: a left priority bar (4px) + 6px content inset.
 *   - glass: an opt-in glassmorphism tier (backdrop blur) from the optional
 *     token layer. NOT part of the default - pass it explicitly.
 *
 * The task-specific content (title, steps, progress, PrioTag, Tags, ...) is
 * composed as children; this component owns only the visual surface.
 */
import type { CSSProperties, ReactNode } from "react";
import { R, SP } from "@rukin/tokens";
import { optional } from "@rukin/tokens/build/tokens.optional";
import { useTheme } from "./theme";

export type GlassTier = "subtle" | "card" | "raised" | "overlay";

export type CardProps = {
  children: ReactNode;
  onClick?: () => void;
  /** Opt-in glassmorphism tier (optional layer). Omit for the flat default look. */
  glass?: GlassTier;
  /** Left priority bar colour; adds a 6px content inset when set. */
  accentBar?: string;
  /** Escape hatch for per-instance overrides (e.g. drop the default margin). */
  style?: CSSProperties;
};

export function Card({ children, onClick, glass, accentBar, style }: CardProps) {
  const { C } = useTheme();
  const glassStyle: CSSProperties = glass
    ? {
        backdropFilter: optional.glass[glass],
        WebkitBackdropFilter: optional.glass[glass],
      }
    : {};
  return (
    <div
      onClick={onClick}
      style={{
        background: C.card,
        borderRadius: R.md,
        padding: `${SP[4]}px ${SP[4]}px`,
        marginBottom: SP[3],
        cursor: onClick ? "pointer" : "default",
        WebkitTapHighlightColor: "transparent",
        position: "relative",
        boxShadow: C.shadow,
        overflow: "hidden",
        border: `1px solid ${C.dark ? C.hairline : "transparent"}`,
        ...glassStyle,
        ...style,
      }}
    >
      {accentBar && (
        <div
          style={{
            position: "absolute",
            left: 0,
            top: 0,
            bottom: 0,
            width: 4,
            background: accentBar,
          }}
        />
      )}
      <div style={{ paddingLeft: accentBar ? 6 : 0 }}>{children}</div>
    </div>
  );
}