import { VariantProps, tv } from 'tailwind-variants';

export const calendarTheme = tv({
  slots: {
    wrapper: [
      'max-w-[352px]',
      'bg-surface-floating',
      'dark:bg-overlay2',
      'shadow-dropdown',
      'dark:shadow-background',
      'rounded-xl',
    ],
    calendar: ['flex', 'flex-col', 'py-2', 'px-2', 'gap-2'],
    navigation: [
      'flex',
      'items-center',
      'justify-between',
      'gap-3',
      'py-2.5',
      'px-1',
    ],
    actions: ['flex', 'items-center', 'justify-center', 'gap-1.5', 'flex-1'],
    button: [
      'flex',
      'items-center',
      'gap-2',
      'px-2',
      'py-2',
      'rounded-lg',
      'border',
      'border-border-interactive',
      'text-elements-high-em',
      'dark:text-foreground',
      'shadow-field',
      'bg-white',
      'dark:bg-overlay3',
      'hover:bg-base-bg-alternate',
      'dark:hover:bg-foreground-secondary',
      'focus-visible:bg-base-bg-alternate',
    ],
    footer: [
      'flex',
      'items-center',
      'justify-end',
      'py-3',
      'px-2',
      'gap-3',
      'border-t',
      'border-border-separator',
    ],
  },
});

export type CalendarTheme = VariantProps<typeof calendarTheme>;