import { Component, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureGridComponent, FeatureGridConfig, FeatureItem } from 'ui-landing-pages';

@Component({
  selector: 'app-landing-feature-grid-demo',
  standalone: true,
  imports: [CommonModule, FeatureGridComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="padding: 2rem;">
      <h2>Feature Grid Component</h2>
      <p style="margin-bottom: 2rem; color: #666;">Showcase features in responsive grid layouts with icons, images, and links</p>

    <!-- Basic Feature Grid -->
    <section class="demo-section">
      <h3 class="demo-section__title">Basic Grid</h3>
      <ui-lp-feature-grid 
        [configuration]="basicConfig">
      </ui-lp-feature-grid>
    </section>

    <!-- Card Variant -->
    <section class="demo-section">
      <h3 class="demo-section__title">Card Variant</h3>
      <ui-lp-feature-grid 
        [configuration]="cardConfig">
      </ui-lp-feature-grid>
    </section>

    <!-- Minimal Variant -->
    <section class="demo-section">
      <h3 class="demo-section__title">Minimal Variant</h3>
      <ui-lp-feature-grid 
        [configuration]="minimalConfig">
      </ui-lp-feature-grid>
    </section>

    <!-- List Layout -->
    <section class="demo-section">
      <h3 class="demo-section__title">List Layout</h3>
      <ui-lp-feature-grid 
        [configuration]="listConfig">
      </ui-lp-feature-grid>
    </section>

    <!-- Configuration Code -->
    <section class="demo-section">
      <h3 class="demo-section__title">Configuration</h3>
      <pre class="demo-code">{{ configExample }}</pre>
    </section>
    </div>
  `,
  styleUrl: './landing-feature-grid-demo.component.scss'
})
export class LandingFeatureGridDemoComponent {
  private sampleFeatures: FeatureItem[] = [
    {
      id: 'security',
      title: 'Advanced Security',
      description: 'Enterprise-grade security with end-to-end encryption and compliance certifications.',
      icon: 'shield-alt',
      iconType: 'fa',
      link: {
        url: '#security',
        text: 'Learn more',
        target: '_self'
      }
    },
    {
      id: 'performance',
      title: 'Lightning Fast',
      description: 'Optimized for speed with CDN delivery and smart caching mechanisms.',
      icon: 'bolt',
      iconType: 'fa',
      link: {
        url: '#performance',
        text: 'View benchmarks',
        target: '_self'
      }
    },
    {
      id: 'analytics',
      title: 'Smart Analytics',
      description: 'Gain insights with real-time analytics and customizable dashboards.',
      icon: 'chart-line',
      iconType: 'fa',
      link: {
        url: '#analytics',
        text: 'Explore features',
        target: '_self'
      }
    },
    {
      id: 'support',
      title: '24/7 Support',
      description: 'Get help whenever you need it with our dedicated support team.',
      icon: 'headset',
      iconType: 'fa',
      link: {
        url: '#support',
        text: 'Contact us',
        target: '_self'
      }
    }
  ];

  basicConfig: FeatureGridConfig = {
    title: 'Why Choose Our Platform',
    subtitle: 'Discover the features that make us different',
    features: this.sampleFeatures,
    layout: 'grid',
    columns: 'auto',
    variant: 'card',
    showIcons: true,
    spacing: 'normal'
  };

  cardConfig: FeatureGridConfig = {
    title: 'Platform Features',
    features: this.sampleFeatures,
    layout: 'grid',
    columns: 2,
    variant: 'card',
    showIcons: true,
    spacing: 'loose'
  };

  minimalConfig: FeatureGridConfig = {
    features: this.sampleFeatures.slice(0, 3),
    layout: 'grid',
    columns: 3,
    variant: 'minimal',
    showIcons: true,
    spacing: 'tight'
  };

  listConfig: FeatureGridConfig = {
    title: 'Core Capabilities',
    features: this.sampleFeatures.slice(0, 3),
    layout: 'list',
    variant: 'minimal',
    showIcons: true,
    spacing: 'normal'
  };

  configExample = `const featureGridConfig: FeatureGridConfig = {
  title: 'Why Choose Our Platform',
  subtitle: 'Discover the features that make us different',
  features: [
    {
      id: 'security',
      title: 'Advanced Security',
      description: 'Enterprise-grade security with end-to-end encryption.',
      icon: 'shield-alt',
      iconType: 'fa',
      link: {
        url: '#security',
        text: 'Learn more'
      }
    }
    // ... more features
  ],
  layout: 'grid',
  columns: 'auto',
  variant: 'card',
  showIcons: true,
  spacing: 'normal'
};`;
}