From 9c954c0e430e47ab4c98932addfb6cc240bc8e35 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Sat, 21 Feb 2026 21:07:17 +0000
Subject: [PATCH] Add prev/next arrow buttons to photo carousel

---
 frontend/src/components/PhotoCarousel.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/frontend/src/components/PhotoCarousel.tsx b/frontend/src/components/PhotoCarousel.tsx
index 34be257..7cd72c8 100644
--- a/frontend/src/components/PhotoCarousel.tsx
+++ b/frontend/src/components/PhotoCarousel.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect } from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import type { ListingDetailPhoto } from '@/types';
 
 interface PhotoCarouselProps {
@@ -45,6 +46,25 @@ export function PhotoCarousel({ photos }: PhotoCarouselProps) {
           ))}
         </div>
       </div>
+      {/* Prev/Next arrows */}
+      {photos.length > 1 && (
+        <>
+          <button
+            className="absolute left-1 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full p-1 transition-colors"
+            onClick={() => emblaApi?.scrollPrev()}
+            aria-label="Previous photo"
+          >
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          <button
+            className="absolute right-1 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white rounded-full p-1 transition-colors"
+            onClick={() => emblaApi?.scrollNext()}
+            aria-label="Next photo"
+          >
+            <ChevronRight className="w-5 h-5" />
+          </button>
+        </>
+      )}
       {/* Counter */}
       <div className="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">
         {selectedIndex + 1} / {photos.length}