import { classNames } from 'mixlea-utils-js';
import { View } from '@tarojs/components';

import type { MlBaseFormFooterProps } from './types';

export function FormFooter(props: MlBaseFormFooterProps) {
  const { showFooter, footerLeftSlots, footerRightSlots, footerPaddingX } = props;

  if (showFooter || footerLeftSlots || footerRightSlots) {
    return (
      <View
        className={classNames('h-base flex gap-x-base', {
          'px-base': footerPaddingX,
        })}
      >
        {footerLeftSlots && (
          <View className="h-full flex items-center gap-x-base">{footerLeftSlots?.map((slot) => slot())}</View>
        )}
        <View className="flex-1 "></View>
        {footerRightSlots && (
          <View className="h-full flex items-center gap-x-base">{footerRightSlots?.map((slot) => slot())}</View>
        )}
      </View>
    );
  }

  return null;
}