/**
 * Default theme configuration for Rating component
 * Uses CSS variables for theming consistency with the design system
 */
const ratingTheme = {
    // Base container styles
    baseStyle: "inline-flex items-center",
    // Individual star button styles
    starStyle: "relative inline-flex items-center justify-center shrink-0 transition-transform duration-150 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-1 rounded-sm",
    // Star icon sizes per rating size
    starSizes: {
        sm: "size-4",
        md: "size-5",
        lg: "size-7",
    },
    // Gap between stars per rating size
    gapSizes: {
        sm: "gap-0.5",
        md: "gap-0.5",
        lg: "gap-1",
    },
    // Filled star colors using CSS variables
    filledColors: {
        warning: "text-[var(--color-warning-400)]",
        primary: "text-[var(--color-primary)]",
        success: "text-[var(--color-success)]",
        danger: "text-[var(--color-danger)]",
    },
    // Empty star color
    emptyColor: "text-[var(--color-neutral-300)]",
    // State styles
    states: {
        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
        readOnly: "pointer-events-none",
    },
};

export { ratingTheme };
