import * as React from 'react'
import { Box, Text } from '@anthropic/ink'
import { Markdown } from '../Markdown.js'

type Props = {
  addMargin: boolean
  planContent: string
}

export function UserPlanMessage({
  addMargin,
  planContent,
}: Props): React.ReactNode {
  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="planMode"
      marginTop={addMargin ? 1 : 0}
      paddingX={1}
    >
      <Box marginBottom={1}>
        <Text bold color="planMode">
          Plan to implement
        </Text>
      </Box>
      <Markdown>{planContent}</Markdown>
    </Box>
  )
}