import type { NuxtUIOptions } from '@nuxt/ui/unplugin'

export const uiOptions: NuxtUIOptions = {
    ui: {
        colors: {
            primary: 'blue',
            neutral: 'zink',
        },
        pagination: {
            slots: {
                root: '',
            }
        },
        button: {
            slots: {
                base: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0!',
            },
        },
        input: {
            slots: {
                base: 'text-(--black) dark:text-white border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0!',
                error: 'text-red-600!'
            },
        },
        select: {
            slots: {
                base: 'w-full! cursor-pointer border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0!',
                itemLabel: 'text-black! dark:text-white!',
                itemTrailingIcon: 'text-black! dark:text-white!'
            },
        },
        formField: {
            slots: {
                error: 'mt-1! text-[14px] text-error text-red-600! dark:text-red-400!',
                label: 'text-[16px]'
            },
        },
        selectMenu: {
            slots: {
                base: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0!',
                content: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! z-80 text-(--black)! dark:text-white!',
                itemLeadingIcon: 'text-(--black)! dark:text-white!'
            }

        },
           table: {
            slots: {
                base: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! bg-(--second-light) dark:bg-(--main-dark)',
                tr: 'border-b! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! text-(--black)! dark:text-white!',
            }

        }
    }
}