/**
 * Default theme for the Metric component
 * Uses variant-first color organization for reliable dark mode support
 */
const metricTheme = {
    // Base container styles (shared across all variants)
    baseStyle: "rounded-[var(--metric-radius)] transition-colors duration-200 overflow-hidden",
    // Visual style variants (structure only, no colors)
    variants: {
        filled: "border border-[var(--color-border)]",
        glass: "glass-effect",
    },
    // Container background styles per variant (color only applies to icon)
    variantColors: {
        filled: "bg-white dark:bg-[var(--color-background-secondary)]",
        glass: "",
    },
    // Icon container styles organized PER VARIANT (color applies to icon)
    iconContainerVariantColors: {
        filled: {
            neutral: "bg-white text-[var(--color-text-primary)] border border-[var(--color-border)] " +
                "dark:bg-[var(--color-background-secondary)]",
            primary: "bg-white text-[var(--color-primary)] border border-[var(--color-border)] " +
                "dark:bg-[var(--color-background-secondary)]",
            secondary: "bg-white text-[var(--color-secondary)] border border-[var(--color-border)] " +
                "dark:bg-[var(--color-background-secondary)]",
            success: "bg-white text-[var(--color-success)] border border-[var(--color-border)] " +
                "dark:bg-[var(--color-background-secondary)]",
            warning: "bg-white text-[var(--color-warning)] border border-[var(--color-border)] " +
                "dark:bg-[var(--color-background-secondary)]",
            danger: "bg-white text-[var(--color-danger)] border border-[var(--color-border)] " +
                "dark:bg-[var(--color-background-secondary)]",
        },
        glass: {
            neutral: "glass-effect-1 !ring-0 text-[var(--color-text-primary)]",
            primary: "glass-effect-2 !ring-0 shadow-lg shadow-blue-500/10 text-[var(--color-primary)] " +
                "dark:text-[var(--color-primary-400)]",
            secondary: "glass-effect-2 !ring-0 shadow-lg shadow-gray-500/10 text-[var(--color-secondary)] " +
                "dark:text-[var(--color-secondary-400)]",
            success: "glass-effect-2 !ring-0 shadow-lg shadow-green-500/10 text-[var(--color-success)] " +
                "dark:text-[var(--color-success-400)]",
            warning: "glass-effect-2 !ring-0 shadow-lg shadow-yellow-500/10 text-[var(--color-warning)] " +
                "dark:text-[var(--color-warning-400)]",
            danger: "glass-effect-2 !ring-0 shadow-lg shadow-rose-500/10 text-[var(--color-danger)] " +
                "dark:text-[var(--color-danger-400)]",
        },
    },
    // Size variants for container and sub-elements
    sizes: {
        sm: {
            container: "", // Padding moved to content section
            contentPadding: "p-3",
            iconContainer: "size-10",
            label: "text-sm",
            value: "text-2xl",
            subtitle: "text-sm mt-1",
        },
        md: {
            container: "", // Padding moved to content section
            contentPadding: "p-4",
            iconContainer: "size-14",
            label: "text-base",
            value: "text-2xl",
            subtitle: "text-sm mt-0.5",
        },
        lg: {
            container: "", // Padding moved to content section
            contentPadding: "p-5",
            iconContainer: "size-16",
            label: "text-lg",
            value: "text-3xl",
            subtitle: "text-base mt-1",
        },
    },
    // Common element styles
    labelStyle: "font-semibold text-[var(--color-text-secondary)] mb-1",
    valueStyle: "font-bold text-[var(--color-text-primary)] tracking-tight",
    subtitleStyle: "text-[var(--color-text-secondary)]/80",
    iconContainerStyle: "rounded-full flex items-center justify-center flex-shrink-0 p-3.5",
};

export { metricTheme };
