import React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import type { HorizontalSplitProps } from '../types/layout.types';

const HorizontalSplit: React.FC<HorizontalSplitProps> = ({ top, bottom, className = '' }) => {
  return (
    <Container fluid className="p-0 h-100 w-100">
      <Row className={`split-root horizontal-split g-0 flex-column h-100 w-100 ${className}`.trim()}>
        <Col className="split-pane split-pane-primary d-flex flex-column">{top}</Col>
        <Col xs="auto" className="split-gutter p-0" />
        <Col className="split-pane split-pane-secondary d-flex flex-column">{bottom}</Col>
      </Row>
    </Container>
  );
};

export default HorizontalSplit;
