[layouts/slideshow]

**AI Analysis** (by Claude)

## Root Cause Analysis

The slideshow component is likely missing proper autoplay interval management or has a logic error where the autoplay timer is only being set/triggered on hover events instead of running continuously. This suggests:

1. The autoplay interval may not be initialized on component mount

2. The interval might be cleared but not restarted properly

3. The autoplay logic could be incorrectly tied to hover event handlers

4. There might be a conflict between manual controls and autoplay functionality

## Affected Files

Based on the new-salon-app structure, these files are likely involved:

- `src/components/layouts/slideshow/Slideshow.tsx` - Main slideshow component

- `src/components/layouts/slideshow/SlideshowControls.tsx` - Navigation/control components

- `src/components/layouts/slideshow/useSlideshowAutoplay.ts` - Custom hook for autoplay logic (if exists)

- `src/components/layouts/slideshow/types.ts` - Slideshow type definitions

- `src/stores/slideshowStore.ts` - Zustand store for slideshow state (if using global state)

## Resolution Approach

### Step 1: Audit Current Autoplay Implementation

```typescript

// Check if autoplay is properly initialized in Slideshow.tsx

useEffect(() => {

if (autoplay && !isPaused) {

// Should start interval here

}

}, [autoplay, isPaused]);

```

### Step 2: Fix Autoplay Logic

```typescript

// Create/fix autoplay hook

const useAutoplay = (enabled: boolean, interval: number, onNext: () => void) => {

useEffect(() => {

if (!enabled) return;

const timer = setInterval(onNext, interval);

return () => clearInterval(timer);

}, [enabled, interval, onNext]);

};

```

### Step 3: Separate Hover Behavior from Autoplay

```typescript

// Ensure hover only pauses/resumes, doesn't control the timer

const handleMouseEnter = () => setIsPaused(true);

const handleMouseLeave = () => setIsPaused(false);

```

### Step 4: Update Component Structure

- Ensure autoplay starts on mount when `autoplay={true}`

- Implement proper cleanup on unmount

- Add pause/resume functionality for hover states

- Test manual navigation doesn't break autoplay

### Step 5: Add Debug Logging

- Log when autoplay starts/stops

- Track interval creation/destruction

- Verify state changes

## Complexity Estimate

**Simple** - This is likely a straightforward logic bug in the autoplay implementation. The fix involves:

- Correcting the useEffect dependencies and timing logic

- Ensuring proper interval management

- Separating hover pause behavior from autoplay initialization

The slideshow component structure is already in place, so this is primarily a bug fix rather than new feature development.

## Dependencies

- **No external blockers** - This appears to be an isolated component issue

- **Prerequisites:**

- Access to current slideshow component implementation

- Understanding of the current autoplay configuration props

- Test slides/content to verify fix works across different scenarios

- **Testing requirements:**

- Verify autoplay starts immediately when component mounts with `autoplay={true}`

- Confirm hover pause/resume works without breaking autoplay

- Test that manual navigation doesn't interfere with autoplay resume

- Ensure multiple slideshows on same page don't conflict