import React from 'react'
import { Box, Text } from '../../ink.js'
import type { Theme } from '../../utils/theme.js'

type LeftRailProps = {
  color?: keyof Theme
  children: React.ReactNode
}

export function LeftRail({
  color = 'forgeCopper',
  children,
}: LeftRailProps): React.ReactNode {
  return (
    <Box>
      <Box marginRight={1}>
        <Text color={color} dimColor>{'\u2502'}</Text>
      </Box>
      <Box flexDirection="column">{children}</Box>
    </Box>
  )
}
