import React, { memo, useCallback } from 'react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import MediaCard from './MediaCard';

const MediaCarousel = memo(function MediaCarousel({ title, media, userProfile }) {
  const scrollContainerRef = React.useRef(null);

  const scroll = useCallback((direction) => {
    if (scrollContainerRef.current) {
      const scrollAmount = direction === 'left' ? -400 : 400;
      scrollContainerRef.current.scrollBy({
        left: scrollAmount,
        behavior: 'smooth'
      });
    }
  }, []);

  return (
    <div className="mb-8">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-bold text-campfire-light">{title}</h2>
        <div className="flex space-x-2">
          <button
            onClick={() => scroll('left')}
            className="p-2 rounded-full bg-campfire-charcoal text-campfire-light hover:bg-campfire-amber hover:text-campfire-dark transition-colors"
          >
            <FaChevronLeft />
          </button>
          <button
            onClick={() => scroll('right')}
            className="p-2 rounded-full bg-campfire-charcoal text-campfire-light hover:bg-campfire-amber hover:text-campfire-dark transition-colors"
          >
            <FaChevronRight />
          </button>
        </div>
      </div>
      
      <div
        ref={scrollContainerRef}
        className="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide"
        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
      >
        {media.map((item) => (
          <div key={item.id} className="flex-shrink-0 w-[200px]">
            <MediaCard media={item} userProfile={userProfile} />
          </div>
        ))}
      </div>
    </div>
  );
});

export default MediaCarousel;
