/**
 * CapsuleButton —— 「试穿」黑色竖向胶囊（《美搭配与美学诊断-UI规范》§3/§7，需求 v2 §3.2）。
 *
 * 形态：44×96 竖条（v2.1 §10.4 紧凑化），黑底白字 14（COLOR_BLACK_CAPSULE），
 * 右缘悬浮垂直居中；未选上衣/未传本人照/生成中置灰（§2 主按钮禁用态：
 * 底 COLOR_DIVIDER、字 COLOR_TEXT_DISABLED）。label 支持换行竖排（如 '试\n穿'）。
 */

import { COLOR_BLACK_CAPSULE, COLOR_DIVIDER, COLOR_TEXT_DISABLED } from '../../core/Theme'

@Component
export struct CapsuleButton {
  label: string = ''
  @Prop isActive: boolean = true
  onAction: () => void = () => {}

  build() {
    Column() {
      Text(this.label)
        .fontSize(14)
        .fontWeight(FontWeight.Medium)
        .fontColor(this.isActive ? Color.White : COLOR_TEXT_DISABLED)
        .textAlign(TextAlign.Center)
    }
     .width(44)
    .height(96)
    .justifyContent(FlexAlign.Center)
    .borderRadius(22)
    .backgroundColor(this.isActive ? COLOR_BLACK_CAPSULE : COLOR_DIVIDER)
    .onClick(() => {
      if (this.isActive) {
        this.onAction()
      }
    })
  }
}