import React from 'react';
import styled from 'styled-components';
import BackgroundModal from './BackgroundModal';
import OrderActionHeader from './header/OrderActionHeader';
import OrderActionFooter from './footer/OrderActionFooter';

interface ActionModalProps {
  headerTitle: string;
  showAdditionalInfo?: boolean;
  infoText?: string;
  headerActions?: React.ReactNode;
  submitBtnTitle?: string;
  footerActions?: React.ReactNode;
  children: React.ReactNode;
  onCloseHeader: () => void;
  onSubmit: () => void;
  isSubmitDisabled?: boolean;
  minWidth?: string; // New optional prop for min-width
  maxWidth?: string; // New optional prop for min-width
}

function OrderActionModal({
  minWidth = '30vw',
  maxWidth = '75vw',
  ...props
}: ActionModalProps) {
  return (
    <BackgroundModal>
      <MainContainer minWidth={minWidth} maxWidth={maxWidth}>
        <OrderActionHeader
          title={props.headerTitle}
          onClose={props.onCloseHeader}
          showInformation={props.showAdditionalInfo}
          infoText={props.infoText}
          actions={props.headerActions}
        />
        {props.children}
        <OrderActionFooter
          submitButtonTitle={props.submitBtnTitle}
          onSubmit={props.onSubmit}
          actions={props.footerActions}
          isSubmitDisabled={props.isSubmitDisabled}
        />
      </MainContainer>
    </BackgroundModal>
  );
}

// Styled component with dynamic min-width
const MainContainer = styled.div<{ minWidth: string; maxWidth: string }>`
  min-height: 30vh;
  max-height: 80vh;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0px 20px 24px -4px #10182814;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow-x: hidden;
  max-width: ${({ maxWidth }) => maxWidth}; // Dynamic max-width
  min-width: ${({ minWidth }) => minWidth}; // Dynamic min-width
`;

export default OrderActionModal;
