import { Component } from '@angular/core';
<% if (usesSupportingComponent) { %><% if (supportVariable === 'card') { %>import {
  <%= classify(supportName) %>,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else if (supportVariable === 'accordion') { %>import {
  <%= classify(supportName) %>,
  <%= classify(supportName) %>Header,
  <%= classify(supportName) %>Panel,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else if (supportVariable === 'table') { %>import {
  <%= classify(supportName) %>,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else if (supportVariable === 'navbar') { %>import {
  <%= classify(supportName) %>,
  <%= classify(supportName) %>Item,
  <%= classify(supportName) %>Menu,
  <%= classify(supportName) %>Toggle,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else if (supportVariable === 'tabs') { %>import {
  <%= classify(supportName) %>,
  <%= classify(supportName) %>List,
  <%= classify(supportName) %>Panel,
  <%= classify(supportName) %>Tab,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else if (supportVariable === 'carousel') { %>import {
  <%= classify(supportName) %>,
  <%= classify(supportName) %>Slide,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else if (supportVariable === 'listGroup') { %>import {
  <%= classify(supportName) %>,
  <%= classify(supportName) %>Item,
} from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } else { %>import { <%= classify(supportName) %> } from './<%= dasherize(supportName) %>/<%= dasherize(supportName) %>';
<% } %><% } %>

interface <%= classify(name) %>Item {
  title: string;
  text: string;
}

interface <%= classify(name) %>FooterGroup {
  title: string;
  links: readonly {
    label: string;
    href: string;
  }[];
}

@Component({
  selector: '<%= selector %>',
  imports: [<% if (usesSupportingComponent) { %>
    <%= classify(supportName) %>,
<% if (supportVariable === 'card') { %>
<% } else if (supportVariable === 'accordion') { %>
    <%= classify(supportName) %>Header,
    <%= classify(supportName) %>Panel,
<% } else if (supportVariable === 'table') { %>
<% } else if (supportVariable === 'navbar') { %>
    <%= classify(supportName) %>Item,
    <%= classify(supportName) %>Menu,
    <%= classify(supportName) %>Toggle,
<% } else if (supportVariable === 'tabs') { %>
    <%= classify(supportName) %>List,
    <%= classify(supportName) %>Panel,
    <%= classify(supportName) %>Tab,
<% } else if (supportVariable === 'carousel') { %>
    <%= classify(supportName) %>Slide,
<% } else if (supportVariable === 'listGroup') { %>
    <%= classify(supportName) %>Item,
<% } %>
  <% } %>],
  templateUrl: './<%= dasherize(name) %>.html',
  styleUrl: './<%= dasherize(name) %>.css',
})
export class <%= classify(name) %> {
  protected readonly kind = '<%= kind %>';
  protected readonly title = '<%= classify(kind) %>';
  protected readonly eyebrow = 'Composição Semmet';
  protected readonly summary =
    'Bloco Angular acessível gerado como código nativo e editável da aplicação.';

  protected readonly items: readonly <%= classify(name) %>Item[] = [
    {
      title: 'Estrutura acessível',
      text: 'Regiões semânticas, títulos, listas e ações começam em uma ordem sensata.',
    },
    {
      title: 'Saída nativa em Angular',
      text: 'Os arquivos gerados são componentes standalone comuns, pertencentes à sua aplicação.',
    },
    {
      title: 'Pronto para compor',
      text: 'Substitua o conteúdo de exemplo por componentes de produto, inputs, outputs e signals.',
    },
  ];

  protected readonly footerGroups: readonly <%= classify(name) %>FooterGroup[] = [
    {
      title: 'Produto',
      links: [
        { label: 'Visão geral', href: '/product' },
        { label: 'Acessibilidade', href: '/accessibility' },
        { label: 'Preços', href: '/pricing' },
      ],
    },
    {
      title: 'Recursos',
      links: [
        { label: 'Documentação', href: '/docs' },
        { label: 'Guias', href: '/guides' },
        { label: 'Registro de alterações', href: '/changelog' },
      ],
    },
    {
      title: 'Empresa',
      links: [
        { label: 'Sobre', href: '/about' },
        { label: 'Contato', href: '/contact' },
        { label: 'Privacidade', href: '/privacy' },
      ],
    },
  ];
}