import { ButtonSpinner, Button as GSButton, Text } from "@gluestack-ui/themed";
import { ComponentProps } from "react";

type Props = ComponentProps<typeof GSButton> & {
  title: string,
  variant?: 'solid' | 'outline',
  isLoading?: boolean,
}

export function Button({
  title,
  isLoading = false,
  variant = 'solid',
  ...others
}: Props) {
  return (
    <GSButton
      w="$full"
      h="$14"
      bg={variant === 'solid' ? '$green700' : 'transparent'}
      rounded="$sm"
      borderWidth={variant === 'solid' ? '$0' : '$1'}
      borderColor="$green500"
      $active-bg={variant === 'solid' ? '$green500' : '$gray500'}
      disabled={isLoading}
      {...others}
    >
      { isLoading ? (
        <ButtonSpinner color={ variant === 'solid' ? '$white' : '$green500'} />
      ) : (
        <Text
          color={ variant === 'solid' ? '$white' : '$green500'}
          fontFamily="$heading"
          fontSize="$sm"
        >
          {title}
        </Text>
      )}
    </GSButton>
  )
}
