// Tokens & icons copy-paste examples.

export /**
 *
 */
const TOKENS_SETUP = `// Point Tailwind at the africanies-theme preset and scan @africanies/africanies-ui so its classes aren't purged.
// Don't re-declare token colors locally — extend the preset.

// tailwind.config.js — monorepo paths (adjust __dirname to your app root)
const path = require('node:path');

module.exports = {
  presets: [require('@africanies/africanies-theme/tailwind-preset')],
  content: [
    path.join(__dirname, 'src/**/*.{html,ts}'),
    // Required: scan the UI library so its literal Tailwind classes survive purge.
    path.join(__dirname, '../../libs/africanies-ui/src/**/*.{html,ts}'),
    path.join(__dirname, '../../libs/africanies-theme/src/**/*.{html,ts}'),
    // Published-app equivalent:
    // './src/**/*.{html,ts}',
    // './node_modules/@africanies/africanies-ui/**/*.{js,mjs}',
  ],
};
`;

export /**
 *
 */
const TOKENS_CORE = `// Ink / surface utilities — use literal class strings (Tailwind can't see dynamic names).

<div class="bg-ink text-white">Ink surface</div>
<div class="bg-ink-brand text-white">Brand ink panel</div>
<div class="bg-ink-950 text-white">Near-black panel</div>
<div class="bg-black text-white">Pure black</div>
<div class="bg-white text-ink">White surface</div>
`;

export /**
 *
 */
const TOKENS_NEUTRAL = `// Borders, muted copy, page chrome — stay on the token scale, skip raw hex.

<div class="rounded-lg border border-border bg-background-welcome p-4">
  <p class="text-neutral-600">Muted supporting copy</p>
  <p class="text-ink dark:text-white">Primary body on welcome background</p>
</div>

<span class="text-neutral-400">Disabled / placeholder tone</span>
<span class="text-neutral-300">Light divider accent</span>
`;

export /**
 *
 */
const TOKENS_EXPORT = `// SFN / export green — fine for static marketing. Mode-aware chrome? Use ModeColorService.

<span class="rounded-md bg-export px-2 py-1 text-white">Primary</span>
<span class="rounded-md bg-export-subtle px-2 py-1 text-export">Subtle</span>
<span class="text-export-light">Light accent text</span>
<div class="rounded-xl bg-export-tint p-5">Tinted panel</div>
`;

export /**
 *
 */
const TOKENS_IMPORT = `// STN / import orange — same idea as export; prefer ModeColorService when mode can flip.

<span class="rounded-md bg-import px-2 py-1 text-white">Primary</span>
<span class="rounded-md bg-import-subtle px-2 py-1 text-import">Subtle</span>
<span class="text-import-light">Light accent text</span>
<div class="rounded-xl bg-import-tint p-5">Tinted panel</div>
`;

export /**
 *
 */
const TOKENS_FEEDBACK = `// Status colors — mode-agnostic. Don't map danger/warning to export/import.

<span class="rounded-md bg-danger-subtle px-2 py-1 text-danger">Danger</span>
<span class="rounded-md bg-danger px-2 py-1 text-white">Danger solid</span>
<span class="rounded-md bg-warning-subtle px-2 py-1 text-warning-dark">Warning</span>
<span class="text-danger-dark">Inline error copy</span>
`;

export /**
 *
 */
const TOKENS_TYPE = `// Typography scale from the theme preset. Prefer these over arbitrary text-[Npx].

<h1 class="text-heading-1 text-ink dark:text-white">Ship across continents</h1>
<h2 class="text-heading-2 text-ink dark:text-white">Shipment details</h2>
<h3 class="text-heading-3 text-ink dark:text-white">Cargo summary</h3>
<p class="text-body-lg text-ink dark:text-white">
  Supporting sentence for denser marketing or empty states.
</p>
<p class="text-body text-ink dark:text-white">
  Default reading size for forms, tables, and dialogs.
</p>
<p class="text-body-sm text-neutral-600">Secondary copy and dense metadata.</p>
<span class="text-caption text-neutral-600">Hints, timestamps, and chip labels.</span>
`;

export /**
 *
 */
const TOKENS_MODE_ACCENTS = `// Primary chrome that follows SFN/STN. Bind [class] to modeColor.classes() literals —
// don't interpolate Tailwind token names yourself.

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

@Component({
  selector: 'app-mode-accent-demo',
  standalone: true,
  imports: [ButtonComponent],
  template: \`
    @let colors = modeColor.classes();

    <button africanies-button type="button" [class]="colors.primary">
      Mode-aware primary CTA
    </button>

    <span [class]="colors.text">Accent label</span>

    <div class="rounded-xl p-5" [class]="colors.bgSubtle">
      <p class="m-0 text-caption font-medium uppercase tracking-wide" [class]="colors.text">
        SFN export / STN import
      </p>
      <p class="mt-2 m-0 text-heading-3 text-ink dark:text-white">Shipment headline</p>
    </div>

    <div
      class="rounded-lg px-3 py-2 transition"
      [class]="colors.soft + ' ' + colors.softHover"
    >
      Selected row highlight
    </div>
  \`,
})
export class ModeAccentDemoComponent {
  protected readonly modeColor = inject(ModeColorService);
}
`;

export /**
 *
 */
const ICONS_USAGE = `// Shared SVG sprite via <africanies-icon>. Type dynamic names as IconName for autocomplete.

import { Component } from '@angular/core';
import { AfricaniesIconComponent, type IconName } from '@africanies/africanies-icons';

@Component({
  selector: 'app-icon-demo',
  standalone: true,
  imports: [AfricaniesIconComponent],
  template: \`
    <africanies-icon name="airplane" [size]="24" />
    <africanies-icon name="warehouse" [size]="24" />
    <africanies-icon name="warning" [size]="24" />
    <africanies-icon [name]="dynamicIcon" [size]="16" />
  \`,
})
export class IconDemoComponent {
  protected readonly dynamicIcon: IconName = 'anchor';
}
`;