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

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

export function Footer(props: MlBaseFormListFooterProps) {
  const { showFooter, footerLeftSlots, footerRightSlots, footerPaddingX, footerPaddingLeft, footerPaddingRight } =
    props;

  if (showFooter || footerLeftSlots || footerRightSlots) {
    const paddingLeft = footerPaddingLeft ?? footerPaddingX;
    const paddingRight = footerPaddingRight ?? footerPaddingX;

    return (
      <View
        className={classNames('h-base flex gap-x-base', {
          'pl-base': paddingLeft,
          'pr-base': paddingRight,
        })}
      >
        {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;
}