1import type { ReactNode } from "react";
2import { View, type ColorValue } from "react-native";
3import { AppText as Text } from "../../components/ui/AppText";
4import { SymbolView, type AppSymbolName } from "../../components/ui/AppSymbol";
5import { ShimmeringWorkContent } from "./thread-work-log";
6
7export function ThreadContextDivider(props: {
8 label: string;
9 icon?: AppSymbolName;
10 iconColor: ColorValue;
11 active?: boolean;
12 failed?: boolean;
13 children?: ReactNode;
14}) {
15 return (
16 <View className="mb-3 flex-row items-center gap-3 px-1 py-1">
17 <View className="h-px min-w-2 flex-1 bg-separator" />
18 <View className="shrink flex-row flex-wrap items-center justify-center gap-1.5">
19 {props.icon ? (
20 <SymbolView name={props.icon} size={12} tintColor={props.iconColor} type="monochrome" />
21 ) : null}
22 {props.active ? (
23 <ShimmeringWorkContent
24 className="flex-none"
25 textClassName="font-t3-medium"
26 compact
27 icon="brain"
28 iconSubtleColor={props.iconColor}
29 label={props.label}
30 showIcon={false}
31 />
32 ) : (
33 <Text
34 className={
35 props.failed
36 ? "font-t3-medium text-xs text-danger-foreground"
37 : "font-t3-medium text-xs text-foreground-muted"
38 }
39 >
40 {props.label}
41 </Text>
42 )}
43 {props.children}
44 </View>
45 <View className="h-px min-w-2 flex-1 bg-separator" />
46 </View>
47 );
48}