circle-collect/src/components/MyGroupCard.tsx

// components/MyGroupCard.tsx
import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import colors from "./colors";

interface MyGroup {
  id: string;
  groupName: string;
  description: string;
  visibility: "PUBLIC" | "PRIVATE";
  createdByName: string;
  currentParticipants: number;
  maxParticipants: number;
  contributionAmount: number;
  cycleType: "MONTHLY" | "QUARTERLY" | "YEARLY";
  status: "PENDING" | "ACTIVE" | "COMPLETED";
}

interface Props {
  item: MyGroup;
  onManage: (group: MyGroup) => void;
}

export const MyGroupCard: React.FC<Props> = ({ item, onManage }) => {
  const getStatusColor = () => {
    switch (item.status) {
      case "ACTIVE":
        return colors.pastelGreen;
      case "PENDING":
        return colors.pastelOrange; // amber
      case "COMPLETED":
        return colors.pastelBlue;
      default:
        return "#adb5bd";
    }
  };

  return (
    <View style={styles.card}>
      {/* Left Content */}
      <View style={{ flex: 1 }}>
        <View style={styles.cardHeader}>
          <Text style={styles.cardTitle} numberOfLines={1}>
            {item.groupName}
          </Text>
          <View style={[styles.statusBadge, { backgroundColor: getStatusColor() }]}>
            <Text style={styles.statusBadgeText}>{item.status}</Text>
          </View>
        </View>

        <Text style={styles.cardSubtitle} numberOfLines={2}>
          {item.description}
        </Text>

        <View style={styles.cardMetaContainer}>
          <Text style={styles.cardMetaText}>
            <Ionicons name="person-outline" size={14} /> {item.currentParticipants}/{item.maxParticipants}
          </Text>
          <Text style={styles.cardMetaText}>
            <Ionicons name="cash-outline" size={14} /> ₹{item.contributionAmount}
          </Text>
          <Text style={styles.cardMetaText}>
            <Ionicons name="time-outline" size={14} /> {item.cycleType}
          </Text>
        </View>

        <Text style={styles.createdBy}>Created by {item.createdByName}</Text>
      </View>

      {/* Manage Button */}
      <TouchableOpacity style={styles.manageButton} onPress={() => onManage(item)}>
        <Ionicons name="settings-outline" size={24} color={colors.textDark} />
        <Text style={styles.manageButtonText}>Manage</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    flexDirection: "row",
    alignItems: "center",
    elevation: 2,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 4,
    marginHorizontal:12
  },
  cardHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 6,
  },
  cardTitle: {
    fontSize: 17,
    fontWeight: "bold",
    color: "#343a40",
    flex: 1,
    marginRight: 10,
  },
  cardSubtitle: {
    fontSize: 14,
    color: "#6c757d",
    marginBottom: 8,
  },
  cardMetaContainer: {
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    marginBottom: 6,
  },
  manageButtonText: {
    fontSize: 12,
    color: colors.textDark,
  },
  cardMetaText: {
    fontSize: 13,
    color: "#495057",
    fontWeight: "500",
    marginRight: 16,
    flexDirection: "row",
    alignItems: "center",
  },
  statusBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 5,
    elevation: 1,
  },
  statusBadgeText: {
    color: colors.textDark,
    fontSize: 10,
    fontWeight: "bold",
    textTransform: "uppercase",
  },
  manageButton: {
    width: 100,
    borderRadius:10,
    flexDirection:"row",
    alignItems: "center",
    justifyContent: "space-around",
    padding: 6,
    marginLeft: 10,
    elevation:2,
    backgroundColor: colors.pastelOrange,
  },
  createdBy: {
    fontSize: 12,
    color: "#868e96",
    marginTop: 4,
  },
});

export default MyGroupCard;