import { yTRouter } from '../utils/YTRouter'

@Component
export struct YTHeader {
  @BuilderParam leftComp?: () => void
  @BuilderParam RightComp?: () => void
  @BuilderParam CenterComp?: () => void
  backArrow: boolean = true
  title: string = ''
  click = () => {
    yTRouter.routerBack()
  }

  build() {
    Stack() {
      Row() {
        if (this.backArrow && !this.leftComp) {
          Image($r('app.media.ic_back'))
            .width(24)
            .margin({ left: 16 })
            .onClick(this.click)
        }
        if (this.leftComp) {
          this.leftComp()
        }

        if (this.RightComp) {
          this.RightComp()
        }
      }
      .width('100%')
      .justifyContent(this.RightComp ? FlexAlign.SpaceBetween : FlexAlign.Start)

      if (this.CenterComp || this.title)
      Row() {
        if (this.CenterComp) {
          this.CenterComp()
        }
        if (this.title && !this.CenterComp) {
          Text(this.title)
            .fontSize(18)
            .fontWeight(700)
        }
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .hitTestBehavior(HitTestMode.None)
    }
    .height(44)
    .backgroundColor(Color.White)
  }
}