eletrotupi / tcc/ frontend/components/insights/MoodTrendWidget.tsx252758fae561de1d43e23deea4bfe302e84f2e78
1.9 KB | 88 lines Raw
1
import React from "react";
2
import { Text, StyleSheet, ActivityIndicator } from "react-native";
3
import { Card } from "@/components/ui/Cards";
4
import { useInsight } from "@/hooks/useInsights.queries";
5
import { Colors, Spacing, Typography } from "@/constants/theme";
6
import { InsightCard } from "./InsightCard";
7
8
export const MoodTrendWidget: React.FC = () => {
9
  const { data: insight, isLoading } = useInsight("MOOD_TREND");
10
11
  if (isLoading) {
12
    return (
13
      <Card style={styles.container}>
14
        <ActivityIndicator />
15
      </Card>
16
    );
17
  }
18
19
  if (!insight) {
20
    return (
21
      <InsightCard
22
        category="Humor"
23
        body={
24
          <Text style={styles.empty}>
25
            Registre seu humor com mais frequência para acompanhar suas
26
            tendências.
27
          </Text>
28
        }
29
        accent="neutral"
30
        metric="—"
31
      />
32
    );
33
  }
34
35
  const metadata = insight.metadata as {
36
    delta: number;
37
    dominantMood: string;
38
    avgEnergy: number;
39
  };
40
41
  const metric = metadata?.delta ? `${Math.round(metadata.delta)}%` : "N/A";
42
43
  const accent = metadata?.delta
44
    ? metadata.delta < 0
45
      ? "purple"
46
      : "green"
47
    : "green";
48
49
  return (
50
    <InsightCard
51
      category="Humor"
52
      body={insight.body}
53
      metric={metric}
54
      accent={accent}
55
      footnote="Compara a média de humor da primeira e segunda metade da semana (escala 1–5)."
56
    />
57
  );
58
};
59
60
const styles = StyleSheet.create({
61
  container: {
62
    flex: 1,
63
    padding: Spacing.cardGap,
64
  },
65
  header: {
66
    flexDirection: "row",
67
    alignItems: "center",
68
    gap: 4,
69
    marginBottom: 5,
70
  },
71
  label: {
72
    ...Typography.labelSm,
73
    opacity: 0.6,
74
  },
75
  value: {
76
    ...Typography.labelSm,
77
    fontWeight: "600" as const,
78
  },
79
  delta: {
80
    ...Typography.labelSm,
81
    opacity: 0.6,
82
    marginTop: 2,
83
  },
84
  empty: {
85
    color: Colors.light.lightSlateGray,
86
    marginTop: 4,
87
  },
88
});