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

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

export const NamiHeader: React.FC<Props> = ({ components, scaleFactor, onClose }) => {
  const ctx = usePaywallContext();
  const formFactor = ctx.state.formFactor;
  const inFullScreen = ctx.state.fullScreenPresentation ?? false;
  const marginTop = formFactor === 'phone' && !inFullScreen ? 40 : 0;

  const list = Array.isArray(components)
    ? components
    : (components as any)?.components ?? [components];
  const renderedList = React.useMemo(
    () => list.map((comp: any, i: number) => (
      <TemplateRenderer key={comp.id ?? i} component={comp} scaleFactor={scaleFactor} onClose={onClose} />
    )),
    [list, scaleFactor, onClose],
  );

  return (
    <View style={[styles.header, { marginTop }]}>
      {renderedList}
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    display: 'flex',
    position: 'relative',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 2,
  },
});