import { cva } from 'class-variance-authority';

export const mobileMenuItemUnorderedListStyling = cva(['tw-flex tw-flex-col tw-gap-3'], {
  variants: {
    isLastUnorderedList: {
      false: [],
      true: ['tw-pb-6'],
    },
  },
});

export const navIconStyling = cva(['tw-text-gray-400', 'tw-transition-transform'], {
  variants: {
    isOpen: {
      true: ['tw-rotate-180'],
      false: [],
    },
  },
});

export const mobileNavMenuStyling = cva(['-tw-z-10', 'tw-px-4', 'tw-overflow-auto', 'md:tw-px-5', 'header-gradient'], {
  variants: {
    isOpen: {
      true: ['tw-fixed', 'tw-left-0', 'tw-top-0', 'tw-pt-16', 'tw-w-full', 'tw-h-full'],
      false: ['tw-hidden'],
    },
  },
});

export const mobileSubMenuLinkWrapper = cva(
  [
    'tw-flex',
    'tw-flex-col',
    'tw-gap-1',
    'tw-rounded-lg',
    'tw-border',
    'tw-border-common-transparent',
    'tw-transition-colors',
  ],
  {
    variants: {
      variant: {
        copyOnly: ['tw-p-2', 'hover:tw-bg-gray-900', 'hover:tw-border-gray-700'],
        image: [],
      },
    },
  }
);

export const desktopNavStyling = cva([
  'tw-absolute tw-top-[calc(100%+2px)] tw-bg-black tw-flex tw-w-max tw-border tw-border-gray-900 tw-rounded-lg tw-right-0 tw-bg-common-black tw-z-10',
]);

export const desktopNavListItemStyling = cva(
  [
    'tw-cursor-pointer tw-relative tw-flex tw-items-center tw-gap-1 tw-py-6 tw-border-b-2 tw-transition-colors tw-border-common-transparent',
  ],
  {
    variants: {
      color: {
        green: ['hover:tw-border-green-500', 'focus:tw-border-green-500'],
        yellow: ['hover:tw-border-yellow-300', 'focus:tw-border-yellow-300'],
        pink: ['hover:tw-border-pink-200', 'focus:tw-border-pink-200'],
        purple: ['hover:tw-border-purple-500', 'focus:tw-border-purple-500'],
      },
    },
  }
);

export const menuItemIconStyling = cva(['tw-text-common-white'], {
  variants: {
    color: {
      green: ['tw-text-green-500'],
      yellow: ['tw-text-yellow-300'],
      pink: ['tw-text-pink-200'],
      purple: ['tw-text-purple-500'],
    },
  },
});

export const desktopMenuItemStyling = cva(['tw-flex', 'tw-flex-col', 'tw-gap-3', 'tw-pt-4', 'tw-px-4', 'tw-pb-8'], {
  variants: {
    variant: {
      image: ['tw-max-w-[250px]', 'tw-rounded-lg', 'tw-border', 'tw-border-common-transparent', 'tw-transition-colors'],
      copyOnly: ['tw-max-w-xs'],
    },
    isSibling: {
      true: [
        'tw-relative',
        'before:tw-absolute',
        'before:tw-h-full',
        'before:tw-w-px',
        'before:tw-bg-gray-900',
        'before:tw-left-0',
        'before:-tw-bottom-0',
      ],
      false: [],
    },
  },
});

export const desktopSubMenuWrapping = cva(
  [
    'tw-flex',
    'tw-flex-col',
    'tw-gap-1',
    'tw-rounded-lg',
    'tw-border',
    'tw-border-common-transparent',
    'tw-transition-colors',
  ],
  {
    variants: {
      variant: {
        copyOnly: ['tw-p-2', 'hover:tw-bg-gray-900', 'hover:tw-border-gray-700'],
        image: [],
      },
    },
  }
);
