/**
 * Segment —— 两枚胶囊分段控件（《美搭配与美学诊断-UI规范》§4/§7）。
 *
 * 使用方：发型页（女生/男生）、美学诊断填写页（男/女）。
 * 形态：容器 IMAGE_BG 圆角 18 内边距 2；选中段主色底白字圆角 16。
 */

import { COLOR_PRIMARY, COLOR_IMAGE_BG, COLOR_TEXT_PRIMARY } from '../../core/Theme'

@Component
export struct Segment {
  items: string[] = []
  selected: number = 0
  onSelect: (idx: number) => void = (_idx: number) => {}

  build() {
    Row({ space: 0 }) {
      ForEach(this.items, (label: string, idx: number) => {
        Text(label)
          .fontSize(13)
          .fontColor(this.selected === idx ? Color.White : COLOR_TEXT_PRIMARY)
          .backgroundColor(this.selected === idx ? COLOR_PRIMARY : Color.Transparent)
          .padding({ left: 20, right: 20, top: 7, bottom: 7 })
          .borderRadius(16)
          .onClick(() => {
            if (this.selected !== idx) {
              this.onSelect(idx)
            }
          })
      }, (label: string) => label)
    }
    .padding(2)
    .borderRadius(18)
    .backgroundColor(COLOR_IMAGE_BG)
  }
}