// Metro module 14214 (f14215).
import { memo, useContext } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import QuestDockContext from "./QuestDockContext";
import { useQuestTaskDetails, useTaskPlatformScreen } from "../../hooks/QuestHooks";
import { useQuestBarTitle, useQuestBarSubtitle } from "../../hooks/QuestCopyHooks";
import { QuestContent } from "../../QuestTypes";
import QuestProgressIndicator from "../QuestProgressIndicator";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles({
  wrapper: {
    alignItems: "center",
    display: "flex",
    flexDirection: "row",
    flexGrow: 1,
    flexShrink: 1,
    gap: 8,
    justifyContent: "center",
    padding: 8
  },
  progressIndicatorWrapper: {
    flexGrow: 0,
    flexShrink: 0
  },
  copy: {
    flexGrow: 1,
    flexShrink: 1
  }
});
const r34 = memo(function QuestDockEnrolledHeader() {
  const quest = useContext(QuestDockContext).quest;
  const styles = useStyles();
  const questTaskDetails = useQuestTaskDetails(quest);
  const [activeScreen] = useTaskPlatformScreen(quest, questTaskDetails);
  return <View style={styles.wrapper}>
    <View style={styles.progressIndicatorWrapper}>
      <QuestProgressIndicator quest={quest} size="x-sm" progress={questTaskDetails.percentComplete} loading={false} hasConfetti />
    </View>
    <View style={styles.copy}>
      <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
        {useQuestBarTitle(quest)}
      </Text>
      <Text variant="text-sm/medium" color="text-muted">
        {useQuestBarSubtitle({
          quest,
          isExpanded: false,
          activeScreen,
          sourceQuestContent: QuestContent.QUEST_BAR_MOBILE
        })}
      </Text>
    </View>
  </View>;
});
export default r34;