import { AppColor, AppFontSize, AppRadius } from '../theme/Theme';

/**
 * 分段切换控件：多个等宽选项，选中项白底金字。
 * 用于「周/月/年计划」类型切换、「小组/个人」tab 切换。
 */
@ComponentV2
export struct SegmentedControl {
  @Param items: string[] = [];
  @Param selectedIndex: number = 0;
  @Event onSelect: (index: number) => void;

  build() {
    Row() {
      ForEach(this.items, (item: string, index: number) => {
        Text(item)
          .fontSize(AppFontSize.body)
          .fontWeight(index === this.selectedIndex ? FontWeight.Bold : FontWeight.Normal)
          .fontColor(index === this.selectedIndex ? AppColor.gold : AppColor.textMuted)
          .backgroundColor(index === this.selectedIndex ? AppColor.white : Color.Transparent)
          .borderRadius(AppRadius.pill)
          .textAlign(TextAlign.Center)
          .height(36)
          .layoutWeight(1)
          .onClick(() => {
            this.onSelect(index);
          })
      }, (item: string) => item)
    }
    .width('100%')
    .padding(4)
    .backgroundColor(AppColor.segmentedTrack)
    .borderRadius(AppRadius.pill)
  }
}