import * as React from 'react'
import { Box, Text, useTheme } from 'src/ink.js'
import { RiosCircleMark } from './RiosCircleMark.js'

const WELCOME_V2_WIDTH = 58

/**
 * First-run / onboarding header: RiOS branding + circular logo.
 * Replaces upstream moon/cloud ASCII art.
 */
export function WelcomeV2() {
  const [theme] = useTheme()
  const isLight = ['light', 'light-daltonized', 'light-ansi'].includes(theme)

  return (
    <Box flexDirection="column" width={WELCOME_V2_WIDTH} alignItems="flex-start">
      <Text>
        <Text color="claude">Welcome to RiOS Code </Text>
        <Text dimColor={true}>v{MACRO.VERSION} </Text>
      </Text>
      <Box
        marginY={1}
        alignItems="center"
        justifyContent="center"
        width={WELCOME_V2_WIDTH}
      >
        <RiosCircleMark />
      </Box>
      {isLight ? (
        <Text dimColor={true}>
          {'─'.repeat(Math.min(WELCOME_V2_WIDTH, 48))}
        </Text>
      ) : (
        <Text dimColor={true}>
          {'·'.repeat(Math.min(WELCOME_V2_WIDTH, 48))}
        </Text>
      )}
    </Box>
  )
}
