import React from 'react';
import { View, StyleSheet } from 'react-native';
import type { THeaderFooter } from '@namiml/sdk-core';
import { TemplateRenderer } from '../TemplateRenderer';

interface Props {
  components: THeaderFooter;
  scaleFactor: number;
  onClose?: () => void;
}

export const NamiFooter: React.FC<Props> = ({ components, scaleFactor, onClose }) => {
  const list = Array.isArray(components)
    ? components
    : (components as any)?.components ?? [components];

  return (
    <View style={styles.footer}>
      {list.map((comp: any, i: number) => (
        <TemplateRenderer key={comp.id ?? i} component={comp} scaleFactor={scaleFactor} onClose={onClose} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  footer: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 3,
  },
});