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

/**
 * 可点选状态胶囊：选中态 = 状态色底白字，未选中 = 白底灰字。label/color 由调用方提供。
 */
@ComponentV2
export struct StatusPill {
  @Param label: string = '';
  @Param color: string = AppColor.gold;
  @Param selected: boolean = false;
  @Event onTap: () => void;

  build() {
    Row({ space: 6 }) {
      Row()
        .width(8)
        .height(8)
        .borderRadius(4)
        .backgroundColor(this.selected ? AppColor.white : this.color)
      Text(this.label)
        .fontSize(13)
        .fontColor(this.selected ? AppColor.white : AppColor.textSecondary)
    }
    .justifyContent(FlexAlign.Center)
    .padding({ left: 16, right: 16, top: 10, bottom: 10 })
    .backgroundColor(this.selected ? this.color : AppColor.white)
    .border({ width: 1, color: this.selected ? this.color : AppColor.pillBorder })
    .borderRadius(AppRadius.pill)
    .onClick(() => {
      this.onTap();
    })
  }
}