/**
 * 家书 FamilyBook · 可选中胶囊片（鸿蒙端）
 *
 * 日程「新建/编辑」里给**重复**和**提醒**两组选项用。
 *
 * 🔴🔴 为什么必须是**组件**而不是 `@Builder`（用户 2026-10-16 报的真 bug）：
 *     「重复和提醒都挤在一块了……而且**重复和提醒什么的都点不了**。」
 *     根因：原来是 `FbEventEditSheet.chip(label, on: boolean, onTap)` ——
 *     **`@Builder` 的值类型参数（boolean）不参与状态观察**
 *     （SDK 规则 `r/quick-rules/05-state.md`：按值传递「状态变化刷新 ❌」）。
 *     ⇒ 点一下 `this.fRepeat` / `this.fRemind` 确实改了、保存也发得出去，
 *       但**选中态那份子树不重建** ⇒ 界面上没有任何反馈 ⇒ 看着"点不了"。
 *     本项目已在 `FbTagChip`、`FbCalOptionRow` 上踩过同一个坑（各见其文件头）。
 *     ⇒ 统一做法：抽成 `@ComponentV2` + `@Param active`。
 *
 * ⚠️ 顺带的另一处：它原来是裸放在 `Flex({wrap})` 里、**没有 margin** ——
 *    项目里别处的 wrap 都写了 `.margin({ right: 8, bottom: 8 })`
 *    （见 `FbHomePage` 的标签云、`FbSettingsPage` 的色板）。
 *    少了 margin，两行 chip 会**贴在一起**（这正是"挤在一块"的观感来源）。
 *    ⇒ margin 放在**本组件根节点**上，调用方不用再写。
 */

import { FbColors, FbMetric } from '../common/Theme';

@ComponentV2
export struct FbEventChip {
  /** 显示文字 */
  @Param label: string = '';
  /** 是否选中（**必须由父组件按状态算好传进来**） */
  @Param active: boolean = false;
  /** 选中时的底色（默认用日程模块的主题色；日历本那组传本色） */
  @Param activeBg: string = '#4A7C82';
  /** 被点击 */
  @Event onPick: () => void = (): void => {
  };

  build() {
    Text(this.label)
      .fontSize(FbMetric.fontSmall)
      .fontColor(this.active ? Color.White : FbColors.muted)
      .backgroundColor(this.active ? this.activeBg : FbColors.inputBg)
      .borderRadius(FbMetric.radiusPill)
      .padding({ left: 12, right: 12, top: 6, bottom: 6 })
      // ⚠️ 间距放在组件内部：wrap 容器里的子项必须自己有 margin，否则会贴在一起
      .margin({ right: 8, bottom: 8 })
      .onClick((): void => {
        this.onPick();
      })
  }
}