eletrotupi / tcc/ frontend/components/insights/MoodTrendWidget.tsxd28d4c0c63d8f95f839b180d4753a0160e22f6bc
1.8 KB | 87 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="green"
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
    />
56
  );
57
};
58
59
const styles = StyleSheet.create({
60
  container: {
61
    flex: 1,
62
    padding: Spacing.cardGap,
63
  },
64
  header: {
65
    flexDirection: "row",
66
    alignItems: "center",
67
    gap: 4,
68
    marginBottom: 5,
69
  },
70
  label: {
71
    ...Typography.labelSm,
72
    opacity: 0.6,
73
  },
74
  value: {
75
    ...Typography.labelSm,
76
    fontWeight: "600" as const,
77
  },
78
  delta: {
79
    ...Typography.labelSm,
80
    opacity: 0.6,
81
    marginTop: 2,
82
  },
83
  empty: {
84
    color: Colors.light.lightSlateGray,
85
    marginTop: 4,
86
  },
87
});