/**
 * Default theme configuration for Badge component
 * Uses variant-first color organization for reliable dark mode and className overrides
 */
const badgeTheme = {
    // Base styles applied to all badges
    baseStyle: "inline-flex items-center align-middle select-none whitespace-nowrap transition-all duration-300 h-fit w-fit tracking-tight font-semibold border",
    // Visual style variants (structure only, no colors)
    // All variants get `border` via baseStyle for consistent box sizing
    variants: {
        filled: "border-transparent",
        outline: "bg-transparent",
        soft: "",
    },
    // Color styles organized PER VARIANT
    // This structure enables reliable dark: variants and className overrides
    variantColors: {
        // Filled variant - solid backgrounds, no visible border
        filled: {
            neutral: "bg-[var(--color-neutral-900)] text-white " +
                "dark:bg-[var(--color-neutral-700)]",
            primary: "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] " +
                "dark:bg-[var(--color-primary-600)]",
            secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-contrast)] " +
                "dark:bg-[var(--color-secondary-600)]",
            success: "bg-[var(--color-success-600)] text-[var(--color-success-contrast)] " +
                "dark:bg-[var(--color-success-600)]",
            warning: "bg-[var(--color-warning)] text-[var(--color-warning-contrast)] " +
                "dark:bg-[var(--color-warning-600)]",
            danger: "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] " +
                "dark:bg-[var(--color-danger-600)]",
        },
        // Outline variant - transparent bg with colored border
        outline: {
            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " + "",
            primary: "text-[var(--color-primary)] border-[var(--color-border)] " +
                "dark:text-[var(--color-primary-400)]",
            secondary: "text-[var(--color-secondary)] border-[var(--color-border)] " +
                "dark:text-[var(--color-secondary-400)]",
            success: "text-[var(--color-success)] border-[var(--color-border)] " +
                "dark:text-[var(--color-success-400)]",
            warning: "text-[var(--color-warning)] border-[var(--color-border)] " +
                "dark:text-[var(--color-warning-400)]",
            danger: "text-[var(--color-danger)] border-[var(--color-border)] " +
                "dark:text-[var(--color-danger-400)]",
        },
        // Soft variant - subtle background tints (Preline-style: 800 text, 500/20 dark bg)
        soft: {
            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-text-primary)]/10 " +
                "dark:bg-[var(--color-neutral-900)]",
            primary: "bg-[var(--color-primary-100)] text-[var(--color-primary-800)] border-[var(--color-primary-800)]/20 " +
                "dark:bg-[var(--color-primary-500)]/20 dark:text-[var(--color-primary-300)]",
            secondary: "bg-[var(--color-secondary-100)] text-[var(--color-secondary-800)] border-[var(--color-secondary-800)]/10 " +
                "dark:bg-[var(--color-secondary-500)]/20 dark:text-[var(--color-secondary-400)]",
            success: "bg-[var(--color-success-100)] text-[var(--color-success-800)] border-[var(--color-success-800)]/20 " +
                "dark:bg-[var(--color-success-500)]/20 dark:text-[var(--color-success-400)]",
            warning: "bg-[var(--color-warning-100)] text-[var(--color-warning-800)] border-[var(--color-warning-800)]/20 " +
                "dark:bg-[var(--color-warning-500)]/20 dark:text-[var(--color-warning-400)]",
            danger: "bg-[var(--color-danger-100)] text-[var(--color-danger-800)] border-[var(--color-danger-800)]/20 " +
                "dark:bg-[var(--color-danger-500)]/20 dark:text-[var(--color-danger-400)]",
        },
    },
    // Flat size structure (no nested objects)
    sizes: {
        sm: "text-sm px-1.5 py-0.25 gap-1",
        md: "text-base px-2 py-0.25 gap-1",
    },
    // Additional padding for pill shape
    pillSizes: {
        sm: "px-2",
        md: "px-2.5",
    },
    // Icon sizes — applies to wrapper span; [&>svg] selector ensures SVG scales to fit
    iconSizes: {
        sm: "size-3.5 [&>svg]:size-3.5",
        md: "size-4 [&>svg]:size-4",
    },
    // Avatar sizes (base sizes without negative margin)
    avatarSizes: {
        sm: "size-4",
        md: "size-5",
    },
    // Dismiss icon sizes (button sizes itself from icon + padding)
    dismissSizes: {
        sm: "size-3",
        md: "size-4",
    },
    // Dot inherits text color via currentColor — works across all variants/colors
    dotColors: {
        neutral: "bg-current",
        primary: "bg-current",
        secondary: "bg-current",
        success: "bg-current",
        warning: "bg-current",
        danger: "bg-current",
    },
    // State styles
    states: {
        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
        hover: "cursor-pointer",
    },
};

export { badgeTheme };
