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

import { fonts } from "@/constants/theme";
import { tabLayout } from "@/lib/tab-layout";
import { useAppTheme } from "@/contexts/ThemeContext";

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

/** Title block — scrolls with tab screen content. */
export function PageHeader({ title, subtitle }: PageHeaderProps) {
  const { colors } = useAppTheme();

  return (
    <View style={tabLayout.pageHeader}>
      <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,
  },
});