// src/components/JoinedGroupCard.tsx

import React, { FC } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { JoinedGroup } from '../types';

interface JoinedGroupCardProps {
  item: JoinedGroup;
}

export const JoinedGroupCard: FC<JoinedGroupCardProps> = ({ item }) => (
  <View style={styles.card}>
    <View>
      <Text style={styles.cardTitle}>{item.groupName}</Text>
      <Text style={styles.cardSubtitle}>Created by {item.createdBy}</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    elevation: 2,
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 4,
  },
  cardTitle: {
    fontSize: 17,
    fontWeight: 'bold',
    color: '#343a40',
  },
  cardSubtitle: {
    fontSize: 14,
    color: '#6c757d',
  },
});