import { ChevronLeft, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

interface CarouselControlsProps {
  count: number;
  activeIndex: number;
  onPrev: () => void;
  onNext: () => void;
}

export function CarouselControls({ count, activeIndex, onPrev, onNext }: CarouselControlsProps) {
  return (
    <div className="flex items-center justify-center gap-3 py-4">
      <button
        type="button"
        onClick={onPrev}
        disabled={activeIndex === 0}
        aria-label="Previous task"
        className="flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground hover:bg-accent disabled:opacity-30 disabled:cursor-not-allowed"
      >
        <ChevronLeft size={18} />
      </button>

      <div className="flex items-center gap-1.5">
        {Array.from({ length: count }, (_, i) => (
          <div
            key={i}
            className={cn(
              'h-1.5 rounded-full transition-all duration-200',
              i === activeIndex
                ? 'w-5 bg-foreground'
                : 'w-1.5 bg-muted-foreground/40',
            )}
          />
        ))}
      </div>

      <button
        type="button"
        onClick={onNext}
        disabled={activeIndex === count - 1}
        aria-label="Next task"
        className="flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground hover:bg-accent disabled:opacity-30 disabled:cursor-not-allowed"
      >
        <ChevronRight size={18} />
      </button>
    </div>
  );
}
