import type { ComponentProps, ReactNode } from 'react';
import { Pressable, Text } from 'react-native';

export const Button = ({
  children,
  onPress,
  variant = 'primary',
  disabled = false,
  ...props
}: {
  children: ReactNode;
  onPress?: () => void;
  variant?: 'primary' | 'outline' | 'danger' | 'ghost';
  disabled?: boolean;
} & Omit<ComponentProps<typeof Pressable>, 'children'>) => {
  const variantClass =
    variant === 'outline'
      ? 'border-border border bg-transparent'
      : variant === 'danger'
        ? 'bg-red-600'
        : variant === 'ghost'
          ? 'bg-transparent'
          : 'bg-primary';
  const textClass =
    variant === 'outline' || variant === 'ghost'
      ? 'text-foreground'
      : 'text-primary-foreground';

  return (
    <Pressable
      className={`items-center rounded-md px-4 py-3 disabled:opacity-50 ${variantClass}`}
      disabled={disabled}
      onPress={onPress}
      {...props}
    >
      <Text className={`font-semibold ${textClass}`}>{children}</Text>
    </Pressable>
  );
};
