import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LogoCloudComponent, LogoCloudConfig, LogoItem } from 'ui-landing-pages';

@Component({
  selector: 'app-landing-logo-cloud-demo',
  standalone: true,
  imports: [CommonModule, LogoCloudComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Logo Cloud Component</h2>
      <p style="margin-bottom: 2rem; color: #666;">Display partner and client logos in various layouts</p>

    <!-- Basic Row Layout -->
    <section class="demo-section">
      <h3 class="demo-section__title">Row Layout</h3>
      <ui-lp-logo-cloud 
        [configuration]="rowConfig">
      </ui-lp-logo-cloud>
    </section>

    <!-- Grid Layout -->
    <section class="demo-section">
      <h3 class="demo-section__title">Grid Layout</h3>
      <ui-lp-logo-cloud 
        [configuration]="gridConfig">
      </ui-lp-logo-cloud>
    </section>

    <!-- Marquee Layout -->
    <section class="demo-section">
      <h3 class="demo-section__title">Marquee Layout</h3>
      <ui-lp-logo-cloud 
        [configuration]="marqueeConfig">
      </ui-lp-logo-cloud>
    </section>

    <!-- Configuration Code -->
    <section class="demo-section">
      <h3 class="demo-section__title">Configuration</h3>
      <pre class="demo-code">{{ configExample }}</pre>
    </section>
    </div>
  `,
  styleUrl: './landing-logo-cloud-demo.component.scss'
})
export class LandingLogoCloudDemoComponent {
  private sampleLogos: LogoItem[] = [
    {
      id: 'google',
      name: 'Google',
      logo: 'https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg',
      url: 'https://google.com',
      grayscale: false
    },
    {
      id: 'microsoft',
      name: 'Microsoft',
      logo: 'https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg',
      url: 'https://microsoft.com',
      grayscale: false
    },
    {
      id: 'amazon',
      name: 'Amazon',
      logo: 'https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg',
      url: 'https://amazon.com',
      grayscale: false
    },
    {
      id: 'apple',
      name: 'Apple',
      logo: 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg',
      url: 'https://apple.com',
      grayscale: false
    },
    {
      id: 'netflix',
      name: 'Netflix',
      logo: 'https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg',
      url: 'https://netflix.com',
      grayscale: false
    },
    {
      id: 'spotify',
      name: 'Spotify',
      logo: 'https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg',
      url: 'https://spotify.com',
      grayscale: false
    }
  ];

  rowConfig: LogoCloudConfig = {
    title: 'Trusted by Industry Leaders',
    subtitle: 'Join thousands of companies using our platform',
    logos: this.sampleLogos,
    layout: 'row',
    itemsPerRow: 5,
    grayscale: true,
    hoverEffect: true,
    maxHeight: 60
  };

  gridConfig: LogoCloudConfig = {
    title: 'Our Partners',
    logos: this.sampleLogos,
    layout: 'grid',
    itemsPerRow: 4,
    grayscale: true,
    hoverEffect: true,
    maxHeight: 80
  };

  marqueeConfig: LogoCloudConfig = {
    title: 'Continuous Partnership',
    subtitle: 'Seamlessly scrolling partner showcase',
    logos: this.sampleLogos,
    layout: 'marquee',
    grayscale: true,
    hoverEffect: true,
    maxHeight: 70
  };

  configExample = `const logoCloudConfig: LogoCloudConfig = {
  title: 'Trusted by Industry Leaders',
  subtitle: 'Join thousands of companies using our platform',
  logos: [
    {
      id: 'google',
      name: 'Google',
      logo: 'path/to/google-logo.svg',
      url: 'https://google.com',
      grayscale: false
    }
    // ... more logos
  ],
  layout: 'row',
  itemsPerRow: 5,
  grayscale: true,
  hoverEffect: true,
  maxHeight: 60
};`;
}