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

const VerticalSplit: React.FC<VerticalSplitProps> = ({
  left,
  right,
  ratio = '1:1',
  className = ''
}) => {
  const ratioClass =
    ratio === '3:1' ? 'vertical-split-3-1' :
    ratio === '2:1' ? 'vertical-split-2-1' :
    ratio === '25/70' ? 'vertical-split-25-70' :
    'vertical-split-1-1';

  return (
    <Container fluid className="p-0 h-100 w-100">
      <Row className={`split-root vertical-split g-0 flex-nowrap h-100 w-100 ${ratioClass} ${className}`.trim()}>
        <Col className="split-pane split-pane-primary d-flex flex-column h-100">{left}</Col>
        <Col xs="auto" className="split-gutter p-0" />
        <Col className="split-pane split-pane-secondary d-flex flex-column h-100">{right}</Col>
      </Row>
    </Container>
  );
};

export default VerticalSplit;
