Surface

import { cva, type VariantProps } from "class-variance-authority";
import { type ComponentProps } from "react";
import { cn } from "../lib/cn";

/**
 * DesignX surface — Card-shaped MD3 container. Registry id stays `surface`.
 * Elevation maps to surface-container roles only.
 */
const surfaceVariants = cva("text-on-surface font-[family-name:var(--md-ref-typeface-plain)]", {
  variants: {
    elevation: {
      0: "bg-surface",
      1: "bg-surface-container-low",
      2: "bg-surface-container",
      3: "bg-surface-container-high",
      4: "bg-surface-container-highest",
      5: "bg-surface-bright",
    },
    radius: {
      none: "rounded-none",
      small: "rounded-[var(--md-sys-shape-corner-small)]",
      medium: "rounded-[var(--md-sys-shape-corner-medium)]",
      large: "rounded-[var(--md-sys-shape-corner-large)]",
    },
    bordered: {
      true: "border border-outline-variant",
      false: "",
    },
  },
  defaultVariants: {
    elevation: 2,
    radius: "medium",
    bordered: false,
  },
});

export interface SurfaceProps
  extends ComponentProps<"div">, VariantProps<typeof surfaceVariants> {}

export function Surface({ className, elevation, radius, bordered, ...props }: SurfaceProps) {
  return (
    <div
      data-slot="surface"
      className={cn(surfaceVariants({ elevation, radius, bordered }), className)}
      {...props}
    />
  );
}

export { surfaceVariants };