// africanies-button copy-paste examples.

export /**
 *
 */
const BUTTON_VARIANTS = `// Variants. Primary / ghost-primary / secondary (stroked) pick up SFN green /
// STN orange from ModeColorService. flat is neutral chrome (Cancel, Filters).

import { Component } from '@angular/core';
import {
  ButtonComponent,
  type ButtonVariant,
} from '@africanies/africanies-ui';

@Component({
  selector: 'app-shipment-actions',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    <div class="flex flex-wrap items-end gap-6">
      @for (v of variants; track v) {
        <div class="flex flex-col gap-2">
          <span class="text-caption text-neutral-600">{{ v }}</span>
          <button africanies-button type="button" [variant]="v">
            {{ labels[v] }}
          </button>
        </div>
      }
    </div>
  \`,
})
export class ShipmentActionsComponent {
  protected readonly variants: ButtonVariant[] = [
    'primary',
    'secondary',
    'flat',
    'ghost',
    'ghost-primary',
    'ghost-danger',
    'underline',
    'danger',
  ];

  protected readonly labels: Record<ButtonVariant, string> = {
    primary: 'Save shipment',
    secondary: 'Save draft',
    flat: 'Filters',
    ghost: 'Cancel',
    'ghost-primary': 'Add row',
    'ghost-danger': 'Remove',
    underline: 'Learn more',
    danger: 'Delete',
  };
}`;

export /**
 *
 */
const BUTTON_SIZES = `// sm | md | lg. Default is md. Use sm in toolbars/dialogs; save lg for hero CTAs.

import { Component } from '@angular/core';
import {
  ButtonComponent,
  type ButtonSize,
} from '@africanies/africanies-ui';

@Component({
  selector: 'app-button-sizes',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    <div class="flex flex-wrap items-end gap-6">
      @for (s of sizes; track s) {
        <div class="flex flex-col gap-2">
          <span class="text-caption text-neutral-600">size={{ s }}</span>
          <button africanies-button type="button" [size]="s">
            Continue
          </button>
        </div>
      }
    </div>
  \`,
})
export class ButtonSizesComponent {
  protected readonly sizes: ButtonSize[] = ['sm', 'md', 'lg'];
}`;

export /**
 *
 */
const BUTTON_MATRIX = `// Full variant × size grid — handy for QA, not something you'd ship on a product page.

import { Component } from '@angular/core';
import {
  ButtonComponent,
  type ButtonSize,
  type ButtonVariant,
} from '@africanies/africanies-ui';

@Component({
  selector: 'app-button-matrix',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    <table class="w-full border-collapse text-left">
      <thead>
        <tr class="text-caption text-neutral-600">
          <th class="pb-3 pr-4 font-medium">Variant</th>
          @for (s of sizes; track s) {
            <th class="pb-3 pr-4 font-medium">{{ s }}</th>
          }
        </tr>
      </thead>
      <tbody>
        @for (v of variants; track v) {
          <tr class="border-t border-border dark:border-white/10">
            <td class="py-3 pr-4 text-body-sm text-neutral-600">{{ v }}</td>
            @for (s of sizes; track s) {
              <td class="py-3 pr-4">
                <button africanies-button type="button" [variant]="v" [size]="s">
                  Action
                </button>
              </td>
            }
          </tr>
        }
      </tbody>
    </table>
  \`,
})
export class ButtonMatrixComponent {
  protected readonly variants: ButtonVariant[] = [
    'primary',
    'secondary',
    'ghost',
    'danger',
  ];
  protected readonly sizes: ButtonSize[] = ['sm', 'md', 'lg'];
}`;

export /**
 *
 */
const BUTTON_ICONS = `// Drop <africanies-icon> inside the button — same focus ring as the label.
// Icon-only? Put aria-label on the host.

import { Component } from '@angular/core';
import { AfricaniesIconComponent } from '@africanies/africanies-icons';
import { ButtonComponent } from '@africanies/africanies-ui';

@Component({
  selector: 'app-button-icons',
  standalone: true,
  imports: [ButtonComponent, AfricaniesIconComponent],
  template: \`
    <div class="flex flex-wrap gap-3">
      <button africanies-button type="button" variant="primary">
        <africanies-icon name="airplane" [size]="16" />
        Create shipment
      </button>

      <button africanies-button type="button" variant="secondary">
        <africanies-icon name="adjust" [size]="16" />
        Filters
      </button>

      <button africanies-button type="button" variant="ghost" size="sm">
        <africanies-icon name="warehouse" [size]="14" />
        Warehouse
      </button>

      <button africanies-button type="button" variant="danger" size="sm">
        <africanies-icon name="warning" [size]="14" />
        Void
      </button>
    </div>
  \`,
})
export class ButtonIconsComponent {}`;

export /**
 *
 */
const BUTTON_LINKS = `// Same look on <a> — use routerLink for in-app, href for external.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ButtonComponent } from '@africanies/africanies-ui';

@Component({
  selector: 'app-button-links',
  standalone: true,
  imports: [ButtonComponent, RouterLink],
  template: \`
    <div class="flex flex-wrap gap-3">
      <a africanies-button routerLink="/shipments/new" variant="primary">
        Primary link
      </a>

      <a africanies-button routerLink="/drafts" variant="secondary" size="sm">
        Secondary link
      </a>

      <a africanies-button href="/help/getting-started" variant="ghost">
        Ghost link
      </a>
    </div>
  \`,
})
export class ButtonLinksComponent {}`;

export /**
 *
 */
const BUTTON_DISABLED = `// [disabled] works on buttons and anchors (anchors get aria-disabled + tabindex=-1).
// Use this for unavailable actions — in-flight work belongs on [loading].

import { Component, signal } from '@angular/core';
import { ButtonComponent } from '@africanies/africanies-ui';

@Component({
  selector: 'app-button-disabled',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    <div class="flex flex-wrap gap-3">
      <button africanies-button type="button" variant="primary" [disabled]="saving()">
        {{ saving() ? 'Saving…' : 'Save shipment' }}
      </button>

      <button africanies-button type="button" variant="secondary" disabled>
        Secondary
      </button>

      <button africanies-button type="button" variant="ghost" disabled>
        Ghost
      </button>

      <button africanies-button type="button" variant="danger" disabled>
        Danger
      </button>

      <a africanies-button href="/shipments" variant="ghost" [disabled]="saving()">
        Ghost link
      </a>
    </div>
  \`,
})
export class ButtonDisabledComponent {
  protected readonly saving = signal(false);
}`;

export /**
 *
 */
const BUTTON_LOADING = `// Default loading state is the circular spinner. Label stays in the layout
// (invisible) so the button does not shrink while the request is in flight.

import { Component, signal } from '@angular/core';
import { ButtonComponent } from '@africanies/africanies-ui';

@Component({
  selector: 'app-button-loading',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    <div class="flex flex-wrap items-center gap-3">
      <button
        africanies-button
        type="button"
        variant="primary"
        [loading]="saving()"
        (click)="save()"
      >
        Save shipment
      </button>

      <button africanies-button type="button" variant="secondary" [loading]="true">
        Saving draft
      </button>

      <button
        africanies-button
        type="button"
        variant="danger"
        size="sm"
        [loading]="true"
      >
        Deleting
      </button>
    </div>
  \`,
})
export class ButtonLoadingComponent {
  protected readonly saving = signal(false);

  protected save(): void {
    this.saving.set(true);
    // POST → finalize in subscribe/finalize and set saving false.
  }
}`;

export /**
 *
 */
const BUTTON_CONTEXT = `// Typical toolbar: ghost cancel → secondary draft → primary submit.
// Toggle SFN/STN in the sidebar to see primary shift color.

import { Component, inject, signal } from '@angular/core';
import { ModeColorService } from '@africanies/africanies-theme';
import { ButtonComponent } from '@africanies/africanies-ui';

@Component({
  selector: 'app-shipment-toolbar',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    <div
      class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-background-welcome px-4 py-3 dark:border-white/10 dark:bg-ink-950"
    >
      <div>
        <p class="m-0 text-body font-medium text-ink dark:text-white">
          Shipment {{ ref() }}
        </p>
        <p class="m-0 text-caption text-neutral-600">
          Draft · {{ route() }}
        </p>
      </div>

      <div class="flex flex-wrap gap-2">
        <button africanies-button type="button" variant="ghost" size="sm" (click)="cancel()">
          Cancel
        </button>

        <button
          africanies-button
          type="button"
          variant="secondary"
          size="sm"
          [loading]="saving()"
          (click)="saveDraft()"
        >
          Save draft
        </button>

        <button
          africanies-button
          type="button"
          variant="primary"
          size="sm"
          [loading]="saving()"
          (click)="submit()"
        >
          Submit
        </button>
      </div>
    </div>
  \`,
})
export class ShipmentToolbarComponent {
  protected readonly modeColor = inject(ModeColorService);

  protected readonly ref = signal('SFN-1042');
  protected readonly route = signal('Lagos → London');
  protected readonly saving = signal(false);

  protected cancel(): void {
    // Navigate away or close parent overlay ref.
  }

  protected saveDraft(): void {
    this.saving.set(true);
    // POST draft → finalize in subscribe/finalize and set saving false.
  }

  protected submit(): void {
    this.saving.set(true);
    // POST submit → on success close overlay or navigate to detail.
  }
}`;

export /**
 *
 */
const BUTTON_COPY = `// Clipboard control — icon flips to check on success.
// Optional [announce]="true" also fires a toast when ToastService is provided.

import { Component, signal } from '@angular/core';
import { CopyButtonComponent } from '@africanies/africanies-ui';

@Component({
  selector: 'app-copy-demo',
  standalone: true,
  imports: [CopyButtonComponent],
  template: \`
    <div class="flex flex-wrap items-center gap-4">
      <code class="rounded-md bg-border/60 px-2 py-1 font-mono text-caption">
        {{ reference() }}
      </code>
      <africanies-copy [value]="reference()" ariaLabel="Copy reference" />
      <africanies-copy
        [value]="snippet()"
        label="Copy snippet"
        [announce]="true"
      />
    </div>
  \`,
})
export class CopyDemoComponent {
  protected readonly reference = signal('SFN-1042');
  protected readonly snippet = signal('<africanies-icon name="airplane" />');
}
`;