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

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

type AuthNoticeProps = {
  children: string;
};

export function AuthNotice({ children }: AuthNoticeProps) {
  const { colors } = useAppTheme();

  return (
    <Text
      style={[
        styles.notice,
        {
          color: colors.mutedForeground,
          backgroundColor: colors.muted,
          borderColor: colors.border,
        },
      ]}
    >
      {children}
    </Text>
  );
}

const styles = StyleSheet.create({
  notice: {
    fontSize: 14,
    fontFamily: fonts.body,
    lineHeight: 20,
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radii.lg,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm + 2,
  },
});