rebreak-monorepo/apps/rebreak-native/components/chat/RoomCard.tsx

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Image } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useColors } from '../../lib/theme';

export type Room = {
  id: string;
  name: string;
  description?: string | null;
  isPublic: boolean;
  isDefault: boolean;
  memberCount: number;
  isMember: boolean;
  avatarUrl?: string | null;
  lastMessage?: { content: string; createdAt: string; senderName: string } | null;
};

type Props = {
  room: Room;
  onPress: () => void;
};

function formatTime(ts: string, justNow: string) {
  const diff = Date.now() - new Date(ts).getTime();
  if (diff < 60_000) return justNow;
  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m`;
  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h`;
  return new Date(ts).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
}

export function RoomCard({ room, onPress }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const styles = makeStyles(colors);
  const initials = room.name
    .split(' ')
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? '')
    .join('');

  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <View style={styles.row}>
        <View style={[styles.avatar, { backgroundColor: room.isPublic ? '#EFF6FF' : colors.surfaceElevated }]}>
          {room.avatarUrl ? (
            <Image source={{ uri: room.avatarUrl }} style={styles.avatarImg} contentFit="cover" />
          ) : !room.isPublic ? (
            <Text style={styles.avatarInitials}>{initials}</Text>
          ) : (
            <Ionicons name="people" size={22} color="#3B82F6" />
          )}
        </View>

        <View style={styles.info}>
          <View style={styles.headerRow}>
            <View style={styles.nameWrap}>
              <Text style={styles.name} numberOfLines={1}>
                {room.name}
              </Text>
              {room.isDefault && (
                <View style={styles.defaultBadge}>
                  <Text style={styles.defaultBadgeText}>Standard</Text>
                </View>
              )}
            </View>
            <View style={styles.metaRight}>
              {room.lastMessage && (
                <Text style={styles.time}>
                  {formatTime(room.lastMessage.createdAt, t('chat.just_now'))}
                </Text>
              )}
            </View>
          </View>

          <View style={styles.footerRow}>
            <View style={styles.footerTextWrap}>
              {room.lastMessage ? (
                <Text style={styles.lastMessage} numberOfLines={1}>
                  <Text style={styles.senderName}>{room.lastMessage.senderName}: </Text>
                  {room.lastMessage.content}
                </Text>
              ) : room.description ? (
                <Text style={styles.description} numberOfLines={1}>
                  {room.description}
                </Text>
              ) : null}
            </View>
            <View style={styles.footerRight}>
              <View style={styles.metaPill}>
                <Ionicons name="people" size={10} color={colors.textMuted} />
                <Text style={styles.memberCount}>{room.memberCount}</Text>
              </View>
              {!room.isMember && (
                <View style={styles.joinBadge}>
                  <Text style={styles.joinBadgeText}>{t('chat.join')}</Text>
                </View>
              )}
            </View>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

function makeStyles(colors: ReturnType<typeof useColors>) {
  return StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingVertical: 12,
      backgroundColor: colors.bg,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: colors.border,
      minHeight: 68,
    },
    avatar: {
      width: 48,
      height: 48,
      borderRadius: 24,
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
      marginRight: 12,
      flexShrink: 0,
    },
    avatarImg: {
      width: 48,
      height: 48,
    },
    avatarInitials: {
      fontSize: 15,
      fontFamily: 'Nunito_700Bold',
      color: colors.textMuted,
    },
    info: {
      flex: 1,
      minWidth: 0,
    },
    headerRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 3,
    },
    nameWrap: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      gap: 6,
      minWidth: 0,
    },
    metaRight: {
      marginLeft: 8,
      flexShrink: 0,
    },
    footerRow: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    footerTextWrap: {
      flex: 1,
      minWidth: 0,
    },
    footerRight: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 6,
      marginLeft: 8,
      flexShrink: 0,
    },
    name: {
      fontSize: 15,
      fontFamily: 'Nunito_700Bold',
      color: colors.text,
      flexShrink: 1,
    },
    defaultBadge: {
      paddingHorizontal: 6,
      paddingVertical: 2,
      backgroundColor: '#EFF6FF',
      borderRadius: 6,
      flexShrink: 0,
    },
    defaultBadgeText: {
      fontSize: 9,
      fontFamily: 'Nunito_700Bold',
      color: '#3B82F6',
    },
    lastMessage: {
      fontSize: 13,
      fontFamily: 'Nunito_400Regular',
      color: colors.textMuted,
    },
    senderName: {
      fontFamily: 'Nunito_600SemiBold',
      color: colors.textMuted,
    },
    description: {
      fontSize: 13,
      fontFamily: 'Nunito_400Regular',
      color: colors.textMuted,
    },
    metaPill: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 3,
      paddingHorizontal: 6,
      paddingVertical: 3,
      borderRadius: 8,
      backgroundColor: colors.surfaceElevated,
    },
    memberCount: {
      fontSize: 11,
      fontFamily: 'Nunito_700Bold',
      color: colors.textMuted,
    },
    time: {
      fontSize: 11,
      fontFamily: 'Nunito_500Medium',
      color: colors.textMuted,
    },
    joinBadge: {
      paddingHorizontal: 8,
      paddingVertical: 3,
      backgroundColor: '#EFF6FF',
      borderRadius: 10,
    },
    joinBadgeText: {
      fontSize: 11,
      fontFamily: 'Nunito_700Bold',
      color: '#007AFF',
    },
  });
}