const avatarTheme = {
    baseStyle: "relative inline-flex items-center justify-center overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)] font-bold tracking-tighter rounded-[var(--avatar-radius)] border border-[var(--color-border)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
    sizes: {
        xs: "size-[var(--avatar-size-xs)] text-sm",
        sm: "size-[var(--avatar-size-sm)] text-sm",
        md: "size-[var(--avatar-size-md)] text-base",
        lg: "size-[var(--avatar-size-lg)] text-base",
        xl: "size-[var(--avatar-size-xl)] text-base",
    },
    statuses: {
        online: "bg-[var(--color-success)]",
        offline: "bg-[var(--color-text-muted)]",
        busy: "bg-[var(--color-danger)]",
        away: "bg-[var(--color-warning)]",
        none: "",
    },
    titleStyle: "font-medium leading-tight text-[var(--color-text-primary)] truncate",
    subtitleStyle: "leading-tight text-[var(--color-text-muted)] truncate",
    textSizes: {
        xs: "text-sm",
        sm: "text-sm",
        md: "text-base",
        lg: "text-base",
        xl: "text-base",
    },
    gapSizes: {
        xs: "gap-1.5",
        sm: "gap-2",
        md: "gap-2.5",
        lg: "gap-3",
        xl: "gap-3",
    },
};

export { avatarTheme };
