import React from 'react';
import { Button as TamaguiButton, styled } from 'tamagui';
import type { ButtonProps as TamaguiButtonProps } from 'tamagui';

const StyledButton = styled(TamaguiButton, {
  backgroundColor: '$primary',
  color: 'white',
  borderRadius: '$regular',
  paddingHorizontal: '$4',
  paddingVertical: '$2',
  fontSize: 16,
  fontWeight: '600',
  
  variants: {
    variant: {
      primary: {
        backgroundColor: '$primary',
        color: 'white',
      },
      secondary: {
        backgroundColor: '$secondary',
        color: 'white',
      },
      outline: {
        backgroundColor: 'transparent',
        color: '$primary',
        borderWidth: 1,
        borderColor: '$primary',
      },
    },
    size: {
      small: {
        paddingHorizontal: '$2',
        paddingVertical: '$1',
        fontSize: 14,
      },
      medium: {
        paddingHorizontal: '$4',
        paddingVertical: '$2',
        fontSize: 16,
      },
      large: {
        paddingHorizontal: '$6',
        paddingVertical: '$3',
        fontSize: 18,
      },
    },
  },
  
  defaultVariants: {
    variant: 'primary',
    size: 'medium',
  },
});
export interface ButtonProps extends Omit<TamaguiButtonProps, 'variant' | 'size'> {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'small' | 'medium' | 'large';
}

export const Button: React.FC<ButtonProps> = ({ children, ...props }) => (
  <StyledButton {...props}>{children}</StyledButton>
);