import { defineSlotRecipe } from '@pandacss/dev';

export const breadcrumb = defineSlotRecipe({
  className: 'breadcrumb',
  slots: ['root', 'list', 'link', 'item', 'separator', 'ellipsis'],
  base: {
    list: {
      alignItems: 'center',
      display: 'flex',
      listStyle: 'none',
      wordBreak: 'break-word',
    },
    link: {
      alignItems: 'center',
      borderRadius: 'l1',
      display: 'inline-flex',
      focusRing: 'outside',
      gap: '2',
      outline: '0',
      textDecoration: 'none',
      transition: 'color',
      _icon: { boxSize: '1em' },
    },
    item: {
      display: 'inline-flex',
      alignItems: 'center',
      color: 'fg.muted',
      _last: {
        color: 'fg.default',
      },
    },
    separator: {
      color: 'fg.subtle',
      _icon: { boxSize: '1em' },
      _rtl: { rotate: '180deg' },
    },
    ellipsis: {
      alignItems: 'center',
      color: 'fg.muted',
      display: 'inline-flex',
      justifyContent: 'center',
      _icon: { boxSize: '1em' },
    },
  },

  variants: {
    variant: {
      underline: {
        link: {
          textDecoration: 'underline',
          textDecorationThickness: '0.1em',
          textUnderlineOffset: '0.125em',
          textDecorationColor: 'fg.subtle',
          _hover: { textDecorationColor: 'fg.default' },
        },
      },
      plain: {
        link: {
          color: 'fg.muted',
          _hover: { color: 'fg.default' },
          _currentPage: { color: 'fg.default' },
        },
      },
      discourser: {
        list: {
          gap: '2.5',
          alignItems: 'center',
        },
        item: {
          bg: 'transparent',
          px: '1.5',
          py: '1.5',
          borderRadius: 'l2',
          h: '9',
          display: 'inline-flex',
          alignItems: 'center',
          _last: {
            color: 'fg.default',
            fontWeight: 'medium',
            fontSize: 'md',
            fontFeatureSettings: "'liga' 0, 'calt' 0",
          },
        },
        link: {
          color: 'fg.subtle',
          textStyle: 'bodyMedium',
          fontWeight: 'medium',
          _hover: { color: 'fg.default' },
          _currentPage: { color: 'fg.default', fontWeight: 'semibold' },
        },
        separator: {
          color: 'primary.7',
          _icon: { width: '27px', height: '27px' },
        },
      },
    },
    size: {
      xs: { list: { gap: '1', textStyle: 'xs' } },
      sm: { list: { gap: '1', textStyle: 'sm' } },
      md: { list: { gap: '1.5', textStyle: 'md' } },
      lg: { list: { gap: '2', textStyle: 'lg' } },
    },
  },

  compoundVariants: [
    {
      variant: 'discourser',
      css: {
        link: {
          '&[data-disabled]': {
            color: 'fg.subtle',
            opacity: 0.45,
            pointerEvents: 'none',
            cursor: 'default',
            _hover: { color: 'fg.subtle' },
          },
        },
        item: {
          '&[data-disabled]': {
            opacity: 0.45,
          },
        },
      },
    },
  ],

  defaultVariants: {
    variant: 'plain',
    size: 'md',
  },
});