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

import { Logo } from "@/components/Logo";
import { fonts, spacing } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";

type AuthCardHeaderProps = {
  title: string;
  description: string;
};

export function AuthCardHeader({ title, description }: AuthCardHeaderProps) {
  const { colors } = useAppTheme();

  return (
    <View style={styles.wrapper}>
      <Logo size="md" />
      <View style={styles.copy}>
        <Text style={[styles.title, { color: colors.foreground }]}>{title}</Text>
        <Text style={[styles.description, { color: colors.mutedForeground }]}>
          {description}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    gap: spacing.md,
  },
  copy: {
    gap: spacing.xs,
  },
  title: {
    fontSize: 24,
    fontFamily: fonts.headingSemi,
    letterSpacing: -0.3,
  },
  description: {
    fontSize: 14,
    fontFamily: fonts.body,
    lineHeight: 20,
  },
});