import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
	AccordionModule,
	Accordion,
	IAccordionStyling,
} from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js';

@Component({
	selector: 'my-app',
	template: '<ngxd-accordion [accordionList]="sampleAccordionData" [accordionStyling]="styling"></ngxd-accordion>',
})
class AppCmp {
	sampleAccordionData: Accordion = {
		name: 'sample_accordion',
		items: [
			{
				title: 'Card 1',
				body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione',
			},
			{
				title: 'Card 2',
				body: `
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas.
        `,
			},
		],
	};
	styling: IAccordionStyling = {
		itemsGuts: '1px',
		maxWidth: '99%',
		itemStyling: {
			headBgColor: '#ccc',
			headColor: 'black',
			bodyBgColor: '#f9f9f9',
			bodyPadding: '1rem',
			bodyMargin: '.1rem',
		},
	};
}

@NgModule({
	imports: [BrowserModule, AccordionModule],
	declarations: [AppCmp],
	bootstrap: [AppCmp],
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);
// ... "enableIvy": false, in tsconfig.json