import { ComponentStyleConfig } from '@chakra-ui/react'
import colors from '../foundations/colors'
import { fonts } from '../foundations/fonts'

export const Button: ComponentStyleConfig = {
  variants: {
    primary: {
      background: `${colors.primary}`,
      fontFamily: fonts.default,
      fontWeight: '700',
    },
    secondary: {
      background: 'transparent',
      fontFamily: fonts.default,
      fontWeight: '700',
      border: '1px solid #FFFDF8',
      color: 'white',
    },
    third: {
      border: `1px solid ${colors.primary}`,
      background: 'rgba(255, 189, 19, .1)',
      boxShadow: 'inset 0 0 30px rgb(255 189 19 / 80%)',
      backdropFilter: 'blur(10px)',
      color: '#fff',
      borderRadius: '2rem',
      minWidth: '88px',
      transition: 'all 0.25s',
      _focus: {
        filter: 'brightness(1.2)',
        transition: 'all 0.25s',
        background: 'rgba(255, 189, 19, .1)',
      },
      _active: {
        filter: 'brightness(1.2)',
        transition: 'all 0.25s',
        background: 'rgba(255, 189, 19, .1)',
      },
      _hover: {
        filter: 'brightness(1.2)',
        transition: 'all 0.25s',
        background: 'rgba(255, 189, 19, .1)',
      },
    },
    pagination: {
      color: '#F3F3FF',
      fontWeight: '500',
      fontSize: '14px',
      lineHeight: '33px',
      width: '40px',
      height: '40px',
      border: `2px solid #232D57`,
      borderRadius: '7px',
      justifyContent: 'center',
      alignItems: 'center',
      textAlign: 'center',
      background: `#040C2D`,
      _hover: {
        bg: 'primary',
        filter: 'none',
      },
      _disabled: {
        bg: '#172148',
        opacity: '0.5',
        border: 'none',
      },
    },
  },
  sizes: {
    sm: {
      padding: '16px 24px',
      fontSize: '16px',
      lineHeight: '16px',
    },
    md: {
      padding: '16px 24px',
    },
    lg: {
      padding: '19px 40px',
      fontSize: '18px',
      lineHeight: '27px',
    },
  },
  baseStyle: {
    fontWeight: '700',
    fontFamily: 'default',
    borderRadius: '100px',
    color: '#080518',
    padding: '14px 40px',
    fontSize: '12px',
    lineHeight: '24px',
    background: '#F5F7FF',
    paddingInlineStart: '40px',
    transition: 'all 0.2s',
    _focus: {
      boxShadow: 'none',
    },
    _hover: {
      transition: 'all 0.2s',
      filter: 'brightness(0.6)',
      // transform: { base: 'scale(1.1)', md: 'scale(1.2)' },
    },
  },
}