import { dropdownTheme } from '../Dropdown/Dropdown.theme.js';

const contextMenuTheme = {
    // Inherit all Dropdown styles for consistency
    ...dropdownTheme,
    // Content uses the same styling as Dropdown menu
    contentStyle: dropdownTheme.menuStyle.replace("flex", "flex-col p-1"),
    // Items use exact same styling as Dropdown items (with space for check icon)
    itemStyle: `${dropdownTheme.itemBaseStyle} data-[checked=true]:pl-8`,
    // Checked state - tick icon positioning (absolute left)
    itemCheckedStyle: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-text-primary)] " +
        "dark:text-[var(--color-neutral-200)]",
    // Submenu trigger - based on Dropdown item style with chevron space
    subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
        "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
    // Submenu content - matches main dropdown menu style
    subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
        "dark:bg-[var(--color-background-secondary)]",
    // Separator - horizontal divider
    separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
        "dark:bg-[var(--color-neutral-700)]",
    // Label - section header (matches Dropdown section title)
    labelStyle: dropdownTheme.sectionTitleStyle,
};

export { contextMenuTheme };
