import { StyleSheet } from 'react-native';
import { typography, spacing } from '@theme';

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },
    scrollContainer: {
      flexGrow: 1,
      justifyContent: 'space-between',
      paddingHorizontal: spacing.xxl,
      paddingBottom: spacing.xxl,
    },
    headerContainer: {
      marginTop: 40,
      marginBottom: 24,
    },
    title: {
      fontSize: typography.fontSize.xxl,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: spacing.sm,
    },
    subtitle: {
      fontSize: typography.fontSize.md,
      color: colors.textSecondary,
      lineHeight: 22,
    },
    phoneText: {
      color: colors.text,
      fontWeight: typography.fontWeight.semibold,
    },
    contentWrapper: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    otpWrapper: {
      width: '100%',
      alignItems: 'center',
      marginVertical: spacing.xl,
    },
    resendContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: spacing.md,
      marginBottom: spacing.xl,
    },
    resendText: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },
    resendLink: {
      fontSize: typography.fontSize.sm,
      color: colors.primary,
      fontWeight: typography.fontWeight.bold,
    },
    verifyButton: {
      width: '100%',
      marginTop: spacing.lg,
    },
    keypadContainer: {
      width: '100%',
      marginTop: spacing.xl,
    },
  });