import { StyleSheet, View } from "react-native";

import { ClockedInIndicator } from "@/components/ClockedInIndicator";
import { Logo } from "@/components/Logo";
import { spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";
import { TOP_CHROME_ROW_HEIGHT } from "@/lib/top-chrome-insets";

/** Wordmark left, clocked-in indicator right — sits on TopChromeBar blur. */
export function TopChrome() {
  const { isDark } = useAppTheme();

  return (
    <View style={styles.row}>
      <Logo size="xs" onDark={isDark} />
      <ClockedInIndicator />
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    height: TOP_CHROME_ROW_HEIGHT,
    paddingHorizontal: spacing.md,
  },
});