<div class="tw-flex tw-flex-col" [attr.data-testid]="testId()">
  <span bitTypography="h6" class="tw-flex tw-text-main">{{ title() }}</span>
  <div class="tw-flex tw-items-baseline tw-gap-2">
    @if (iconClass()) {
      <bit-icon [name]="iconClass()" [class]="iconColorClass()" aria-hidden="true"></bit-icon>
    }
    <span bitTypography="h3">{{ cardMetrics() }}</span>
  </div>
  <div class="tw-flex tw-items-baseline tw-mt-4 tw-gap-2">
    <span bitTypography="body2">{{ metricDescription() }}</span>
  </div>
  @if (buttonText()) {
    <div class="tw-flex tw-items-baseline tw-mt-4 tw-gap-2">
      <button
        type="button"
        bitButton
        size="small"
        [buttonType]="buttonType()"
        [attr.aria-label]="buttonText()"
        (click)="onButtonClick()"
      >
        {{ buttonText() }}
      </button>
    </div>
  }
  @if (showActionLink() && !buttonText()) {
    <div class="tw-flex tw-items-baseline tw-mt-4 tw-gap-2">
      <p bitTypography="body1">
        <a bitLink href="#" (click)="onActionClick(); $event.preventDefault()" rel="noreferrer">
          {{ actionText() }}
        </a>
      </p>
    </div>
  }
</div>
