import { ReactNode } from 'react'

import { StyleSheet, View } from 'react-native'

import { SafeAreaView } from 'react-native-safe-area-context'

import { colors, spacing } from '../../constants/theme'

import { AppButton } from './AppButton'

import { FormSessionBar } from './FormSessionBar'



type Props = {

  children?: ReactNode

  submitLabel: string

  cancelLabel?: string

  onSubmit: () => void

  onCancel: () => void

  loading?: boolean

  disabled?: boolean

}



export function FormActionsFooter({

  children,

  submitLabel,

  cancelLabel = 'Cancel',

  onSubmit,

  onCancel,

  loading = false,

  disabled = false,

}: Props) {

  return (

    <SafeAreaView edges={['bottom']} style={styles.footerSafe}>

      <View style={styles.actions}>

        <AppButton

          label={submitLabel}

          icon="save"

          loading={loading}

          disabled={disabled}

          onPress={onSubmit}

        />

        <AppButton label={cancelLabel} icon="cancel" variant="secondary" onPress={onCancel} />

      </View>

      <FormSessionBar />

      {children}

    </SafeAreaView>

  )

}



const styles = StyleSheet.create({

  footerSafe: {

    backgroundColor: colors.surface,

    borderTopColor: colors.border,

    borderTopWidth: 1,

    paddingHorizontal: spacing.md,

    paddingTop: spacing.sm,

  },

  actions: {

    gap: spacing.sm,

    paddingBottom: spacing.xs,

  },

})