import React from 'react';
import {Pressable, StyleProp, ViewStyle} from 'react-native';
import {ColorScheme} from './Design';
import {Text} from 'react-native';

export default function EFullButton(props: {
  text: string;
  active?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
}) {
  return (
    <Pressable
      style={[
        {
          width: '100%',
          borderRadius: 4,
          backgroundColor: ColorScheme.frostedfill.black[10],
          paddingHorizontal: 16,
          paddingVertical: 12,
        },
        props.style,
      ]}
      onPress={() => props.active && props.onPress && props.onPress()}>
      <Text
        style={{
          color: props.active ? ColorScheme.fill[10] : ColorScheme.fill[40],
          textAlign: 'center',
          textAlignVertical: 'center',
          fontSize: 17,
          fontWeight: '600',
        }}>
        {props.text}
      </Text>
    </Pressable>
  );
}

export function ESmallButton(props: {
  text: string;
  active?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
}) {
  return (
    <Pressable
      style={[{
        borderRadius: 4,
        backgroundColor: ColorScheme.frostedfill.white[10],
        paddingHorizontal: 16,
        paddingTop: 12,
        paddingBottom: 13,
        alignSelf: 'flex-start',
        flex: 1,
      },props.style]}
      onPress={() => props.active && props.onPress && props.onPress()}>
      <Text
        style={{
          color: props.active ? ColorScheme.fill[10] : ColorScheme.fill[40],
          fontFamily: 'Pretendard-SemiBold',
          textAlign: 'center',
          textAlignVertical: 'center',
          fontSize: 15,
          flex: 1,
        }}>
        {props.text}
      </Text>
    </Pressable>
  );
}

export function EIconButton(props: {
  children: React.ReactNode,
  active?: boolean;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
}) {
  return (
    <Pressable
      style={[{
        borderRadius: 4,
        backgroundColor: ColorScheme.frostedfill.white[10],
        paddingHorizontal: 8,
        paddingVertical: 8,
        justifyContent: 'center',
        alignContent: 'center',
        height: 40,
      },props.style]}
      onPress={() => props.active && props.onPress && props.onPress()}>
        {props.children}
    </Pressable>
  );
}