// src/renderer/components/ds/ButtonGroup.tsx
// 시안 A: 인셋 버튼 클러스터 — 레퍼런스의 .button-group 패턴
// 물리 버튼들을 인셋 패널 안에 배치하여 그룹화

import { Box } from '@mui/material'
import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'

interface ButtonGroupProps {
  children: React.ReactNode
  /** 가로 배치 (기본 세로) */
  horizontal?: boolean
}

export function ButtonGroup({ children, horizontal = false }: ButtonGroupProps): React.ReactElement {
  return (
    <Box
      sx={{
        bgcolor: d3roPalette.bg.inset,
        p: '6px',
        borderRadius: d3roRadius.inner,
        boxShadow: d3roShadow.inset,
        display: 'flex',
        flexDirection: horizontal ? 'row' : 'column',
        gap: '6px',
      }}
    >
      {children}
    </Box>
  )
}