ontime/apps/client/src/features/modals/ModalSplitInput.tsx

import { PropsWithChildren } from 'react';
import { FormControl } from '@chakra-ui/react';

import style from './settings-modal/SettingsModal.module.scss';

interface ModalSplitInputProps {
  field: string;
  title: string;
  description: string;
  error?: string;
}

export default function ModalSplitInput(props: PropsWithChildren<ModalSplitInputProps>) {
  const { field, title, description, error, children } = props;

  return (
    <FormControl isInvalid={!!error} className={style.splitSection}>
      <label htmlFor={field}>
        <span className={style.sectionTitle}>{title}</span>
        {error ? (
          <span className={style.error}>{error}</span>
        ) : (
          <span className={style.sectionSubtitle}>{description}</span>
        )}
      </label>
      {children}
    </FormControl>
  );
}