import { Component } from '@angular/core';
import { NgxStoriesComponent, StoryGroup } from 'ngx-stories';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxStoriesComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  storyGroups: StoryGroup[] = [
    {
      name: 'John Doe',
      stories: [
        { type: 'image', content: 'https://example.com/story1.jpg' },
        { type: 'component', content: CustomComponent }, // pass any angular component
      ],
    },
    {
      name: 'Jane Smith',
      stories: [
        { type: 'video', content: 'https://example.com/video-story.mp4' },
      ],
    },
  ];
}

interface StoryGroup {
  id?: string;      // Unique identifier (auto-assigned if missing)
  name: string;     // Name of the user/group displayed in the header
  stories: Story[]; // Array of stories for this group
}

interface Story {
  id?: string;      // Unique identifier (auto-assigned if missing)
  type: 'image' | 'video' | 'component';
  content: string | Type<Component>; // URL for image/video, or Component class
}

interface NgxStoriesOptions {
  width?: number;                 // Width of the story container (default: 338)
  height?: number;                // Height of the story container (default: 600)
  currentStoryIndex?: number;     // Start index for stories within a group (default: 0)
  currentStoryGroupIndex?: number;// Start index for story groups (default: 0)
  backlitColor?: string;         // Background color behind the story media (default: '#1b1b1b')
  enableGradientBackground?: boolean; // Enable Instagram-like gradient background (default: true)
}

interface StoryChange {
  currentPerson: string;
  currentPersonIndex: number;
  currentStory: Story;
  currentStoryIndex: number;
  previousStory: Story | null;
  previousStoryIndex: number | null;
}