import { cn } from '../../../utils/cn.js';

/**
 * Default theme for CardStack component
 * Uses CSS variables for theming and follows shadcn override pattern
 */
const cardStackTheme = {
    // Container styles
    rootStyle: "relative w-full flex items-center justify-center",
    containerStyle: cn("relative w-full h-full", "touch-none select-none", // Prevent default touch behaviors
    "[transform-style:preserve-3d]" // Enable 3D transforms
    ),
    // Card base styles
    cardBaseStyle: cn("absolute inset-0 w-full h-full", "rounded-[var(--card-radius,0.5rem)] bg-white", "border border-[var(--color-border)]", "shadow-lg", "cursor-grab active:cursor-grabbing", "transition-shadow duration-200", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2", "[transform-style:preserve-3d]", // Enable 3D transforms on card
    "[backface-visibility:hidden]" // Prevent rendering artifacts during transforms
    ),
    // Disabled card styles
    cardDisabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
    // Perspective variants for 3D depth effect
    perspective: {
        sm: "[perspective:800px]",
        md: "[perspective:1000px]",
        lg: "[perspective:1200px]",
    },
    // State-based styles using data-[state=*] attributes
    states: {
        idle: "shadow-lg cursor-grab",
        dragging: "shadow-2xl z-50 cursor-grabbing",
        exiting: "pointer-events-none",
    },
};

export { cardStackTheme };
