import { ReactNode } from "react";
import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
import { MaterialIcons } from "@expo/vector-icons";
import { LIGTHT_THEME } from "../../constants/theme";

interface CustomTileButtonProps {
  leadingIcon: ReactNode;
  title: string;
  onPress?: () => void;
}

export const CustomTileButton = ({
  title,
  onPress,
  leadingIcon,
}: CustomTileButtonProps) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.account_option}>
      <View style={{ flexDirection: "row", gap: 20, alignItems: "center" }}>
        {leadingIcon}
        <Text style={styles.title}>{title}</Text>
      </View>
      <MaterialIcons name="keyboard-arrow-right" size={30} color="black" />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  account_option: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    height: 55,
    paddingHorizontal: 10,
    borderTopWidth: 2,
    borderTopColor: "#ccc",
    backgroundColor: LIGTHT_THEME.color.white,
    borderRadius: 5,
    width: "100%",
  },
  title: {
    fontSize: 16,
  }
});
