import { Graphics } from 'pixi.js';
import { HStack, Theme } from '../ui';

/** The bar across the top of a tab: its controls in a row on the header colour, a line below. */
export class TabHeader extends HStack {
  private readonly bg = new Graphics();

  constructor() {
    super({ gap: Theme.gap, padding: Theme.padding, align: 'center' });
    this.minHeight = Theme.controlHeight + Theme.padding * 2;
    this.addChildAt(this.bg, 0);
  }

  override redraw(): void {
    this.bg.clear().rect(0, 0, this.w, this.h).fill(Theme.colors.panelHeader);
    this.bg.rect(0, this.h - 1, this.w, 1).fill(Theme.colors.border);
  }
}