const focus =
    'focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-A700 focus-visible:border-transparent focus:z-10';

const style = {
    input: {
        init: `antialiased transform transition duration-200 ease-in-out bg-white font-sans border border-gray-200 tracking-wide leading-normal px-3 py-2 text-gray-900 w-full ${focus}`, //focus:outline-none focus-within:ring-2 focus-within:ring-indigo-A700
        default: `bg-gray-100 border-gray-100`,
        primary:
            'bg-indigo-A700 text-white border-indigo-A700 placeholder-white placeholder-opacity-60 focus-visible:ring-gray-900',
        secondary: 'bg-gray-900 text-white border-black  placeholder-white placeholder-opacity-60',
    },
    button: {
        init: `cursor-pointer active:border-blue-A700 border border-transparent shrink-0 group hover:border-gray-400 inline-flex items-center justify-start leading-normal pb-2 pl-8 pr-8 pt-2 select-none text-inherit transform transition duration-200 ease-in-out w-auto bg-white ${focus}`,
        default:
            'active:bg-gray-300 bg-gray-200 border-gray-200 text-black active:border-gray-300 hover:border-gray-200 hover:bg-gray-300',
        primary:
            'active:bg-indigo-A400 border-indigo-A400 active:border-indigo-A700 bg-indigo-A400 hover:bg-indigo-700 hover:border-indigo-A700 text-white focus-visible:ring-gray-900',
        secondary:
            'active:bg-black active:border-black border-black bg-black focus:text-white hover:bg-gray-800 hover:border-gray-800 text-white',
    },
    checkbox: {
        init: `cursor-pointer active:ring-transparent focus:ring-offset-0 focus:ring-offset-transparent focus:ring-transparent text-indigo-A700 rounded-sm duration-50 ease-in-out shrink-0 p-2 transform transition ${focus}`,
        default: 'bg-gray-200 border-gray-200 text-gray-600',
        primary: 'bg-indigo-A700 text-indigo-A700 focus-visible:ring-gray-900',
        secondary: 'bg-gray-900  text-black',
    },
    radio: {
        init: `cursor-pointer active:ring-transparent focus:ring-offset-0 focus:ring-offset-transparent focus:ring-transparent text-indigo-A700 rounded-full duration-50 ease-in-out shrink-0 p-2 transform transition ${focus}`,
        default: 'bg-gray-200 border-gray-200 text-gray-600',
        primary: 'bg-indigo-A700 text-indigo-A700 focus-visible:ring-gray-900',
        secondary: 'bg-gray-900  text-black',
    },
    select: {
        root: {
            init: `antialiased bg-white font-sans border border-gray-200 tracking-wide leading-normal px-3 py-2 text-gray-900 w-full ${focus}`,
            default: `bg-gray-100 border-gray-100`,
            primary:
                'bg-indigo-A700 text-white border-indigo-A700 placeholder-white placeholder-opacity-60 focus-visible:ring-gray-900',
            secondary: 'bg-gray-900 text-white border-black  placeholder-white placeholder-opacity-60',
        },
    },
    label: ' mb-2 text-sm font-light cursor-pointer inline-block',
    table: {
        init: 'min-w-full relative divide-y divide-gray-200',
        head: 'bg-gray-50',
        headCell: 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hover:font-bold',
        body: 'bg-white divide-y divide-gray-200',
        row: 'hover:bg-gray-50 cursor-pointer relative z-10',
        cell: 'px-6 py-4 whitespace-nowrap text-sm text-gray-500',
        footer: '',
    },
    sideBar: {
        root: 'h-screen bg-gray-800 shadow-xl flex flex-col  max-w-xs shrink-0 relative z-20 text-white transition-all duration-300 ease-in-out',
        headline: 'mb-3 flex w-full items-center',
        homeLink:
            'flex w-full items-center justify-start pl-10 pb-4 focus:outline-none hover:bg-black hover:bg-opacity-30 pt-5',
        menuLabel: 'px-8 mb-1 mt-6 border-l-4 border-transparent opacity-40',
        menuItem: {
            root: 'inline-flex items-center justify-start shrink-0 w-auto py-3 pl-8 pr-8 text-base leading-normal tracking-wider truncate transition duration-200 ease-in-out transform bg-transparent border-0 border-l-4 border-transparent rounded-none cursor-pointer select-none active:border-blue-A700 group hover:border-blue-A700 text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-A700 focus-visible:border-transparent focus:relative focus:z-10 hover:bg-black hover:bg-opacity-50',
            category:
                'inline-flex items-center justify-start shrink-0 w-auto py-3 pl-8 pr-8 text-base leading-normal tracking-wider truncate transition duration-200 ease-in-out transform bg-transparent border-0 border-l-4 border-transparent rounded-none cursor-pointer select-none group text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-A700 focus-visible:border-transparent focus:relative focus:z-10 hover:bg-black hover:bg-opacity-50',
            selected:
                'inline-flex items-center justify-start shrink-0 w-auto py-3 pl-8 pr-8 text-base leading-normal tracking-wider truncate transition duration-200 ease-in-out transform bg-transparent border-0 border-l-4 border-transparent rounded-none cursor-pointer select-none active:border-blue-A700 group text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-A700 focus-visible:border-transparent focus:relative focus:z-10 hover:bg-black hover:bg-opacity-50 border-blue-A400 hover:border-blue-A400 bg-black',
        },
    },
    card: {
        root: 'bg-white shadow hover:shadow-xl transition-all duration-200 ease-in-out overflow-hidden sm:rounded-lg flex flex-col',
        header: {
            root: 'px-4 py-5 sm:px-6 leading-10',
            title: 'text-lg leading-6 font-medium text-gray-900 truncate',
            subTitle: 'pt-1 max-w-2xl text-sm text-gray-500',
        },
        body: {
            root: 'border-t border-gray-200 flex-auto flex flex-col',
        },
        image: {
            root: 'flex justify-center w-full group relative overflow-hidden  cursor-pointer h-44 md:h-64 lg:h-52 xxl:h-64',
            img: ' fill-current max-w-none ',
        },
        content: {
            root: 'px-4 py-4 leading-5 sm:px-6 text-sm text-gray-600 border-t flex-auto',
        },
        footer: {
            root: 'bg-gray-50 px-4 py-5 sm:px-6 text-gray-600 border-t leading-6 lg:space-x-4 flex flex-col md:flex-row justify-between space-y-4 md:space-y-0',
        },
    },
    modal: {
        backdrop: 'fixed flex bg-gray-800 bg-opacity-70 items-center justify-center inset-0 z-50',
        root: `fixed flex w-full max-h-full h-auto bg-white text-black flex-col shadow-xl inset-0 md:relative md:max-w-2xl`,
        header: 'flex shrink-0 px-5 py-4 items-center border-b border-gray-300',
        title: 'pr-4 text-2xl font-sans antialiased md:pr-16',
        subtitle: 'pb-1 text-xs font-sans antialiased opacity-60',
        body: 'flex flex-col h-full  text-gray-900',
        content: 'p-6 flex-auto',
    },
    calendar: {
        init: {
            root: 'bg-white pt-6 pr-5 pb-4 pl-5 border text-sm text-gray-700 border-gray-200',
            selected: 'bg-indigo-A700 border-indigo-A700 hover:border-indigo-A700 text-white',
            current: 'text-indigo-A700 ',
            button: '',
        },
        primary: {
            root: 'bg-indigo-A700 pt-6 pr-5 pb-4 pl-5 border text-sm text-white border-indigo-A400',
            selected: 'bg-white border-white hover:border-white text-indigo-A700',
            current: 'text-amber-A700',
            button: 'hover:border-white focus-visible:ring-white active:border-indigo-A200 text-white',
        },
        secondary: {
            root: 'bg-gray-900 pt-6 pr-5 pb-4 pl-5 border text-sm text-white border-none',
            selected: 'bg-indigo-A700 border-indigo-A700 hover:border-indigo-A700 text-white',
            current: 'text-indigo-A200 ',
            button: '',
        },
    },
    tabs: {
        default: {
            selectedTab: 'border-indigo-A700 hover:border-indigo-A700',
            tabs: 'border-gray-300',
        },
        primary: {
            selectedTab: 'border-white hover:border-white text-white',
            tabs: 'border-indigo-A200',
        },
        secondary: {
            selectedTab: 'border-indigo-A700 hover:border-indigo-A700 text-white',
            tabs: 'border-gray-800',
        },
    },
    misc: {
        focus: focus,
    },
};

export default style;
