import { extendTheme } from '@chakra-ui/react'
import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

const pagination = defineStyle({
  whiteSpace: 'nowrap',
  bg: 'transparent',
  gap: 3,
  paddingInlineStart: 3,
  paddingInlineEnd: 3,
  lineHeight: 10,
  borderRadius: 'md',
  border: '1px solid',
  borderColor: 'inherit',
  width: '100%',
  _hover: {
    textDecor: 'none',
  },
  '&.current': {
    bg: 'var(--chakra-colors-gray-300)',
    border: '1px solid transparent',
  },
  _dark: {
    bg: 'var(--chakra-colors-gray-900)',
    '&.current': {
      bg: 'var(--chakra-colors-gray-700)',
    },
  },
})

const linkTheme = defineStyleConfig({
  variants: { pagination },
})

const theme = extendTheme({
  components: {
    Link: linkTheme,
  },
})

export default theme