import React, { PropsWithChildren } from 'react';
import { Pressable, PressableProps, StyleSheet, Text } from 'react-native';
import { Themes } from '../../lib/theme';
import { useThemeColor } from '../../lib/hooks/use-theme-color';

interface ButtonProps extends PressableProps {
  color?: keyof typeof Themes.dark.colors,
}

export function Button({ style, children, color = "primary", ...otherProps }: PropsWithChildren<ButtonProps>) {
  const bgColor = useThemeColor(color);
  const textColor = useThemeColor('text', 'dark');

  return (
    <Pressable
      style={(state) => [
        styles.default,
        { backgroundColor: bgColor },
        typeof style === "function" ? style(state) : style,
      ]}
      android_ripple={{ color: "#00000022" }}
      {...otherProps}
    >
      <Text
        style={[
          styles.text,
          { color: textColor },
        ]}
      >
        {children}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  default: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 6,
    justifyContent: "center"
  },
  text: {
    textAlign: "center",
    fontSize: 16,
  }
});
