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

import { fonts, spacing } from "@/constants/theme";
import { tabLayout } from "@/lib/tab-layout";
import { useAppTheme } from "@/contexts/ThemeContext";
import { useTopChromeHeight } from "@/lib/top-chrome-insets";

type PageHeaderProps = {
  title: string;
  subtitle: string;
};

/** Title block — transparent, scrolls under TopChromeBar blur. */
export function PageHeader({ title, subtitle }: PageHeaderProps) {
  const { colors } = useAppTheme();
  const topChromeHeight = useTopChromeHeight();

  return (
    <View style={[tabLayout.pageHeader, { paddingTop: topChromeHeight + spacing.md }]}>
      <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text>
      <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>{subtitle}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 28,
    lineHeight: 32,
    fontFamily: fonts.heading,
  },
  subtitle: {
    fontSize: 14,
    lineHeight: 18,
    fontFamily: fonts.body,
  },
});