import { Colors } from "@/constants/Colors";
import { Images } from "@/constants/images";
import { Image } from "expo-image";
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

interface MenuItem {
  icon: string;
  title: string;
  type: string;
  tip?: string;
}

interface MenuCellProps {
  onItemPress: (type: string) => void;
  showWallet?: boolean;
  showExchange?: boolean;
}

export function MenuCell({ onItemPress, showWallet = false, showExchange = false }: MenuCellProps) {
  const menuList: MenuItem[] = [
    ...(showWallet
      ? [
          {
            icon: Images.mine.wallet || "",
            title: "钱包",
            type: "1_1",
          },
        ]
      : []),
    {
      icon: Images.mine.kaixinOrders || "",
      title: "全部订单",
      type: "2_0",
    },
    ...(showExchange
      ? [
          {
            icon: Images.mine.exchangeIcon || "",
            title: "兑换码",
            tip: "10:00 ~ 18:00",
            type: "6_1",
          },
        ]
      : []),
    {
      icon: Images.mine.customerService || "",
      title: "联系客服",
      tip: "10:00 ~ 18:00",
      type: "4_4",
    },
    {
      icon: Images.mine.address || "",
      title: "地址",
      type: "4_3",
    },
    {
      icon: Images.mine.opinion || "",
      title: "意见反馈",
      type: "4_9",
    },
    {
      icon: Images.mine.setting || "",
      title: "设置",
      type: "4_5",
    },
  ];

  return (
    <View style={styles.container}>
      {menuList.map((item, index) => (
        <TouchableOpacity
          key={index}
          style={[
            styles.menuItem,
            index === menuList.length - 1 && styles.lastItem,
          ]}
          onPress={() => onItemPress(item.type)}
          activeOpacity={0.7}
        >
          <View style={styles.content}>
            <Image
              source={{ uri: item.icon }}
              style={styles.icon}
              contentFit="contain"
              // Tint icons to neon blue for consistency if they are monochrome
              tintColor={Colors.neonBlue}
            />
            <Text style={styles.title}>{item.title}</Text>
          </View>
          <View style={styles.arrow}>
            <Text style={styles.arrowText}>›</Text>
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 0,
  },
  menuItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    minHeight: 55,
    backgroundColor: "transparent",
    borderBottomWidth: 1,
    borderBottomColor: "rgba(255, 255, 255, 0.05)",
    paddingHorizontal: 15,
  },
  lastItem: {
    borderBottomWidth: 0,
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
  },
  icon: {
    width: 20,
    height: 20,
    marginRight: 12,
  },
  title: {
    fontSize: 14,
    fontWeight: "500",
    color: Colors.textSecondary,
  },
  arrow: {
    justifyContent: "center",
    alignItems: "center",
  },
  arrowText: {
    fontSize: 20,
    color: Colors.textTertiary,
    marginBottom: 4, // Visual alignment
  },
});