practice/CarouselSection.tsx

import React, { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

interface CarouselSectionProps {
  title: string;
  items: any[];
  renderItem: (item: any, index: number) => React.ReactNode;
}

export function CarouselSection({ title, items, renderItem }: CarouselSectionProps) {
  const [startIndex, setStartIndex] = useState(0);

  const handlePrev = () => {
    setStartIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : items.length - 2));
  };

  const handleNext = () => {
    setStartIndex((prevIndex) => (prevIndex < items.length - 2 ? prevIndex + 1 : 0));
  };

  return (
    <section className="mb-12">
      <h2 className="text-2xl font-semibold mb-4 text-black">{title}</h2>
      <div className="relative">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {items.slice(startIndex, startIndex + 2).map((item, index) => renderItem(item, index))}
        </div>
        <Button
          variant="outline"
          size="icon"
          className="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-full"
          onClick={handlePrev}
        >
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <Button
          variant="outline"
          size="icon"
          className="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-full"
          onClick={handleNext}
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    </section>
  );
}