'use client';

import React from 'react';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface CarouselControlsProps {
  total: number;
  activeIndex: number;
  onPrev: () => void;
  onNext: () => void;
  onSelect: (index: number) => void;
  prevLabel?: string;
  nextLabel?: string;
  getDotLabel?: (index: number) => string;
  className?: string;
  inverted?: boolean;
  showArrows?: boolean;
  showDots?: boolean;
}

const CarouselControls: React.FC<CarouselControlsProps> = ({
  total,
  activeIndex,
  onPrev,
  onNext,
  onSelect,
  prevLabel = 'Previous',
  nextLabel = 'Next',
  getDotLabel,
  className,
  inverted = false,
  showArrows = true,
  showDots = true,
}) => {
  const isDisabled = total <= 1;
  const isCompact = total > 10;

  return (
    <div className={cn('flex flex-wrap items-center justify-end gap-4', className)}>
      {showArrows && (
        <div className="flex items-center gap-2">
          <Button
            type="button"
            aria-label={prevLabel}
            onClick={onPrev}
            disabled={isDisabled}
            variant="outline"
            inverted={inverted}
            size="icon"
          >
            {'\u2190'}
          </Button>
          <Button
            type="button"
            aria-label={nextLabel}
            onClick={onNext}
            disabled={isDisabled}
            variant="outline"
            inverted={inverted}
            size="icon"
          >
            {'\u2192'}
          </Button>
        </div>
      )}
      {showDots && (
        <div
          className={cn(
            'flex flex-wrap items-center',
            isCompact ? 'gap-1 sm:gap-2.5' : 'gap-2 sm:gap-3'
          )}
        >
          {Array.from({ length: total }).map((_, index) => (
            <button
              key={index}
              type="button"
              aria-label={getDotLabel ? getDotLabel(index) : `Slide ${index + 1}`}
              aria-pressed={activeIndex === index}
              onClick={() => onSelect(index)}
              className={cn(
                'inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mma-blue focus-visible:ring-offset-2',
                isCompact ? 'h-1.5 w-1.5 sm:w-6' : 'h-2 w-6 sm:w-10',
                inverted
                  ? 'bg-white/20 hover:bg-white/40'
                  : 'bg-[#151720]/20 hover:bg-[#151720]/40',
                activeIndex === index && (inverted ? 'bg-white' : 'bg-[#151720]')
              )}
            >
              <span className="sr-only">
                {getDotLabel ? getDotLabel(index) : `Slide ${index + 1}`}
              </span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default CarouselControls;