// Metro module 9950 (f9951).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useDueInString, DueInStringTypes } from "../SavedMessageUtils";
import { ClockIcon } from "../../../design/components/Icon/native/redesign/generated/ClockIcon";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    borderTopLeftRadius: Module712.radii.lg,
    borderTopRightRadius: Module712.radii.lg,
    overflow: "hidden",
    gap: 8,
    marginHorizontal: -16,
    marginTop: -16,
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  icon: {
    width: 24,
    height: 24,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    alignItems: "center",
    justifyContent: "center"
  },
  actionsContainer: {
    marginVertical: -4,
    marginLeft: "auto"
  }
});
export function ForLaterCardReminderHeader(props) {
  const { savedMessage, throttledNow, actions } = props;
  const styles = useStyles();
  const dueInString = useDueInString({
    dueAt: savedMessage == null ? void 0 : savedMessage.saveData.dueAt,
    now: throttledNow,
    type: DueInStringTypes.SHORT
  });
  const { dueInText, isOverdue } = dueInString;
  if (savedMessage.saveData.dueAt == null) {
    return null;
  }
  return <View style={styles.container}>
    <View style={styles.icon}>
      <ClockIcon size="xxs" color={isOverdue ? Module712.colors.TEXT_FEEDBACK_CRITICAL : Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
    </View>
    <Text variant="text-md/semibold" color={isOverdue ? "text-feedback-critical" : "mobile-text-heading-primary"}>{dueInText}</Text>
    <View style={styles.actionsContainer}>{actions}</View>
  </View>;
}