import { ButtonProps, chakra, defineStyleConfig } from '@chakra-ui/react';
import { PropsWithChildren } from 'react';
import { Button } from '../Buttons/Button';

const AIButtonWithStyles = defineStyleConfig({
  baseStyle: {
    display: 'flex',
    flexDirection: 'column',
    background: 'white',
    alignItems: 'center',
    gap: 6,
  },
  // Two variants: rounded and smooth
  variants: {
    rounded: {
      padding: 8,
      borderRadius: 'xl',
      boxShadow: 'xl',
    },
    smooth: {
      padding: 6,
      borderRadius: 'base',
      boxShadow: 'md',
    },
  },
})

export const AIButton = ({ children, mode, ...props }: PropsWithChildren<AIButtonProps>) => {
  return (
    <AIButtonWithStyles variant="rounded" {...props}> // <<--- obviously AIButtonWithStyles is not a component
      {children}
    </AIButtonWithStyles>
  );
};

AIButton.displayName = 'AIButton';