rebreak-monorepo/apps/rebreak-native/components/profile/StreakSection.tsx

import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../lib/theme';

export type CooldownEntry = {
  id: string;
  startedAt: string;
  durationLabel: string;
  status: 'active' | 'resolved' | 'cancelled';
  reason: string | null;
};

type Props = {
  currentDays: number;
  longestDays: number;
  startDate: string;
  cooldowns: CooldownEntry[];
};

const statusLabel: Record<CooldownEntry['status'], string> = {
  active: 'aktiv',
  resolved: 'beendet',
  cancelled: 'abgebrochen',
};

const statusColor: Record<CooldownEntry['status'], { bg: string; text: string }> = {
  active: { bg: '#fff7ed', text: '#c2410c' },
  resolved: { bg: '#f0fdf4', text: '#15803d' },
  cancelled: { bg: '#f5f5f5', text: '#737373' },
};

export function StreakSection({ currentDays, longestDays, startDate, cooldowns }: Props) {
  return (
    <View style={{ marginHorizontal: 16, marginTop: 24 }}>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 8,
          marginBottom: 10,
        }}
      >
        <Ionicons name="flame-outline" size={14} color={colors.textMuted} />
        <Text
          style={{
            fontSize: 11,
            color: colors.textMuted,
            fontFamily: 'Nunito_700Bold',
            letterSpacing: 0.8,
          }}
        >
          STREAK
        </Text>
      </View>

      <View
        style={{
          backgroundColor: '#ffffff',
          borderWidth: 1,
          borderColor: '#e5e5e5',
          borderRadius: 14,
          padding: 16,
        }}
      >
        <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 8 }}>
          <Text
            style={{
              fontSize: 36,
              color: colors.text,
              fontFamily: 'Nunito_800ExtraBold',
            }}
          >
            {currentDays}
          </Text>
          <Text
            style={{
              fontSize: 14,
              color: colors.text,
              fontFamily: 'Nunito_600SemiBold',
            }}
          >
            Tage geschützt
          </Text>
        </View>
        <Text
          style={{
            marginTop: 2,
            fontSize: 12,
            color: colors.textMuted,
            fontFamily: 'Nunito_400Regular',
          }}
        >
          seit {startDate}
        </Text>
        <Text
          style={{
            marginTop: 8,
            fontSize: 12,
            color: colors.textMuted,
            fontFamily: 'Nunito_400Regular',
          }}
        >
          Längste Streak: {longestDays} Tage
        </Text>
      </View>

      {cooldowns.length > 0 ? (
        <View style={{ marginTop: 16 }}>
          <Text
            style={{
              fontSize: 11,
              color: colors.textMuted,
              fontFamily: 'Nunito_700Bold',
              letterSpacing: 0.8,
              marginBottom: 8,
              paddingHorizontal: 2,
            }}
          >
            COOLDOWN-VERLAUF
          </Text>

          <View
            style={{
              backgroundColor: '#ffffff',
              borderWidth: 1,
              borderColor: '#e5e5e5',
              borderRadius: 14,
              padding: 14,
            }}
          >
            {cooldowns.map((c, idx) => {
              const isLast = idx === cooldowns.length - 1;
              const colorPair = statusColor[c.status];
              return (
                <View key={c.id} style={{ flexDirection: 'row' }}>
                  <View style={{ width: 16, alignItems: 'center' }}>
                    <View
                      style={{
                        width: 8,
                        height: 8,
                        borderRadius: 4,
                        backgroundColor:
                          c.status === 'active'
                            ? colors.brandOrange
                            : c.status === 'resolved'
                            ? '#15803d'
                            : '#a3a3a3',
                        marginTop: 4,
                      }}
                    />
                    {!isLast ? (
                      <View
                        style={{
                          width: 1,
                          flex: 1,
                          backgroundColor: 'rgba(0,0,0,0.06)',
                          marginTop: 2,
                        }}
                      />
                    ) : null}
                  </View>

                  <View style={{ flex: 1, paddingLeft: 12, paddingBottom: isLast ? 0 : 14 }}>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                      }}
                    >
                      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                        <Text
                          style={{
                            fontSize: 13,
                            color: colors.text,
                            fontFamily: 'Nunito_600SemiBold',
                          }}
                        >
                          {c.startedAt}
                        </Text>
                        <Text
                          style={{
                            fontSize: 12,
                            color: colors.textMuted,
                            fontFamily: 'Nunito_400Regular',
                          }}
                        >
                          {c.durationLabel}
                        </Text>
                      </View>
                      <View
                        style={{
                          paddingHorizontal: 8,
                          paddingVertical: 2,
                          borderRadius: 999,
                          backgroundColor: colorPair.bg,
                        }}
                      >
                        <Text
                          style={{
                            fontSize: 10,
                            color: colorPair.text,
                            fontFamily: 'Nunito_700Bold',
                            letterSpacing: 0.4,
                          }}
                        >
                          {statusLabel[c.status].toUpperCase()}
                        </Text>
                      </View>
                    </View>
                    {c.reason ? (
                      <Text
                        style={{
                          marginTop: 2,
                          fontSize: 12,
                          color: colors.textMuted,
                          fontFamily: 'Nunito_400Regular',
                        }}
                      >
                        {c.reason}
                      </Text>
                    ) : null}
                  </View>
                </View>
              );
            })}
          </View>
        </View>
      ) : null}
    </View>
  );
}