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

import { View, Text, Pressable, Image, StyleSheet } from 'react-native';
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 (
    <Pressable onPress={onPress} android_ripple={{ color: '#f5f5f5' }}>
      {({ pressed }) => (
        <View style={[styles.row, { opacity: pressed ? 0.7 : 1 }]}>
          <View
            style={[
              styles.avatar,
              { backgroundColor: room.isPublic ? colors.surface : colors.surfaceElevated },
            ]}
          >
            {room.avatarUrl ? (
              <Image source={{ uri: room.avatarUrl }} style={styles.avatarImg} />
            ) : !room.isPublic ? (
              <Text style={styles.avatarInitials}>{initials}</Text>
            ) : (
              <Ionicons name="globe-outline" size={20} color="#007AFF" />
            )}
          </View>

          <View style={styles.info}>
            <View style={styles.headerRow}>
              <Text style={styles.name} numberOfLines={1}>
                {room.name}
              </Text>
              {room.isDefault && (
                <View style={styles.defaultBadge}>
                  <Text style={styles.defaultBadgeText}>Standard</Text>
                </View>
              )}
              {room.lastMessage && (
                <Text style={styles.time}>
                  {formatTime(room.lastMessage.createdAt, t('chat.just_now'))}
                </Text>
              )}
            </View>
            <View style={styles.footerRow}>
              <View style={styles.footerTextWrap}>
                {room.lastMessage ? (
                  <Text style={styles.lastMessage} numberOfLines={1}>
                    <Text style={{ fontFamily: 'Nunito_700Bold' }}>
                      {room.lastMessage.senderName}:{' '}
                    </Text>
                    {room.lastMessage.content}
                  </Text>
                ) : room.description ? (
                  <Text style={styles.description} numberOfLines={1}>
                    {room.description}
                  </Text>
                ) : null}
              </View>
              <View style={styles.metaPill}>
                <Ionicons name="people" size={11} color="#a3a3a3" />
                <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>
      )}
    </Pressable>
  );
}

function makeStyles(colors: ReturnType<typeof useColors>) {
  return StyleSheet.create({
    row: {
      width: '100%',
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 14,
      paddingVertical: 11,
      backgroundColor: colors.bg,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: colors.border,
    },
    avatar: {
      width: 42,
      height: 42,
      borderRadius: 21,
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
      marginRight: 10,
    },
    avatarImg: {
      width: 42,
      height: 42,
    },
    avatarInitials: {
      fontSize: 13,
      fontFamily: 'Nunito_700Bold',
      color: colors.textMuted,
    },
    info: {
      flex: 1,
      minWidth: 0,
    },
    headerRow: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    footerRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 3,
    },
    footerTextWrap: {
      flex: 1,
      minWidth: 0,
    },
    metaPill: {
      flexDirection: 'row',
      alignItems: 'center',
      marginLeft: 8,
      paddingHorizontal: 6,
      paddingVertical: 2,
      borderRadius: 8,
      backgroundColor: colors.surfaceElevated,
    },
    name: {
      fontSize: 14,
      fontFamily: 'Nunito_700Bold',
      color: colors.text,
      flexShrink: 1,
    },
    defaultBadge: {
      marginLeft: 6,
      paddingHorizontal: 6,
      paddingVertical: 1,
      backgroundColor: colors.surface,
      borderRadius: 8,
    },
    defaultBadgeText: {
      fontSize: 9,
      fontFamily: 'Nunito_700Bold',
      color: '#007AFF',
    },
    lastMessage: {
      fontSize: 12,
      fontFamily: 'Nunito_400Regular',
      color: colors.textMuted,
    },
    description: {
      fontSize: 12,
      fontFamily: 'Nunito_400Regular',
      color: colors.textMuted,
    },
    right: {
      alignItems: 'flex-end',
      marginLeft: 8,
    },
    memberCount: {
      fontSize: 11,
      fontFamily: 'Nunito_700Bold',
      color: colors.textMuted,
      marginLeft: 3,
    },
    time: {
      fontSize: 10,
      fontFamily: 'Nunito_500Medium',
      color: colors.textMuted,
      marginLeft: 'auto',
      paddingLeft: 6,
    },
    joinBadge: {
      marginLeft: 6,
      paddingHorizontal: 8,
      paddingVertical: 3,
      backgroundColor: colors.surface,
      borderRadius: 10,
    },
    joinBadgeText: {
      fontSize: 10,
      fontFamily: 'Nunito_700Bold',
      color: '#007AFF',
    },
  });
}