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

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

export const CustomTileButton = ({
  title,
  onPress,
  leadingIcon,
  subtitle,
}: CustomTileButtonProps) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.account_option}>
      <View style={{ flexDirection: "row", gap: 20, alignItems: "center" }}>
        {leadingIcon}
        <View style={styles.titleContainer}>
          <Text style={styles.title} numberOfLines={1}>
            {title}
          </Text>
          {subtitle && (
            <Text style={styles.subtitle} numberOfLines={1}>
              {subtitle}
            </Text>
          )}
        </View>
      </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: 60,
    paddingHorizontal: 10,
    borderTopWidth: 2,
    borderTopColor: "#ccc",
    backgroundColor: LIGHT_THEME.color.white,
    borderRadius: 5,
    width: "100%",
  },
  titleContainer: {
    height: "100%",
    alignItems: "flex-start",
    justifyContent: "space-between",
    paddingVertical: 10,
    minWidth: "70%",
    maxWidth: "85%",
  },
  title: {
    fontSize: 16,
    fontWeight: "700",
  },
  subtitle: {
    fontSize: 14,
    color: "#777",
    fontWeight: "500",
    textAlign: "left",
  },
});
