import { createAnatomy } from '@ark-ui/react/anatomy'
import { defineRecipe } from '@bamboocss/dev'
import { toParts } from '../parts'

const anatomy = createAnatomy('button', ['leftIcon', 'rightIcon'])
const parts = toParts(anatomy.build())

export const buttonRecipe = defineRecipe({
  className: 'button',
  base: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontWeight: 600,
    letterSpacing: 'tight',
    paddingX: 6,
    paddingY: 3,
    border: '3px solid var(--border-color, black)',
    boxShadow: '4px 4px 0px 0px var(--shadow-color, black)',
    borderRadius: '13px',
    transition: 'all',
    '&:is(a, button)': {
      _hover: {
        boxShadow: '6px 6px 0px 0px var(--shadow-color, black)',
      },
    },
    ...parts({
      leftIcon: {
        marginRight: 3,
      },
      rightIcon: {
        marginLeft: 3,
      },
    }),
  },
  variants: {
    shape: {
      square: {},
      circle: {
        borderRadius: '50%',
        flexShrink: 0,
      },
    },
    color: {
      main: {
        bg: 'bg.emphasized',
        color: 'black',
      },
      black: {
        bg: 'black',
        color: 'white',
        boxShadow: 'none',
      },
      white: {
        bg: 'white',
        color: 'black',
      },
      yellow: {
        bg: 'bg.main',
        color: 'fg',
      },
      border: {
        bg: 'transparent',
        color: 'fg',
        borderColor: 'fg.headline',
        boxShadowColor: 'fg.headline',
      },
      ghost: {
        bg: 'transparent',
        border: 'none',
        shadow: 'none',
        color: 'fg',
      },
      'ghost.white': {
        bg: 'transparent',
        border: 'none',
        shadow: 'none',
        color: 'white',
      },
    },
    size: {
      sm: {
        paddingY: 3,
        mixin: 'lg',
      },
      md: {
        mixin: 'md',
        md: {
          mixin: 'lg',
        },
        lg: {
          mixin: 'xl',
        },
      },
      lg: {
        mixin: '2xl',
      },
      xl: {
        fontSize: '2rem',
        fontWeight: 'bold',
      },
    },
  },
  defaultVariants: {
    shape: 'square',
    color: 'main',
    size: 'md',
  },
})
