import type { ReactNode } from 'react'
import styles from './SplitPane.module.css'

interface SplitPaneProps {
  list: ReactNode
  detail: ReactNode | null
  emptyMessage?: string
  ratio?: '1:1' | '1:2' | '2:3'
  className?: string
}

const ratioMap: Record<string, string> = {
  '1:1': '1fr 1fr',
  '1:2': '1fr 2fr',
  '2:3': '2fr 3fr',
}

export function SplitPane({
  list,
  detail,
  emptyMessage = 'Select an item to view details',
  ratio = '1:2',
  className,
}: SplitPaneProps) {
  return (
    <div
      className={`${styles.splitPane} ${className ?? ''}`}
      style={{ '--split-columns': ratioMap[ratio] } as React.CSSProperties}
    >
      <div className={styles.listPane}>{list}</div>
      <div className={styles.detailPane}>
        {detail !== null ? detail : (
          <div className={styles.emptyDetail}>{emptyMessage}</div>
        )}
      </div>
    </div>
  )
}
