import { ArrowLeft, ArrowRight } from 'lucide-react';
import { cn } from '@/lib/utils';

type Props = {
    onPrev: () => void;
    onNext: () => void;
    variant?: 'outline' | 'solid';
    className?: string;
};

export default function CarouselControls({
    onPrev,
    onNext,
    variant = 'outline',
    className,
}: Props) {
    const buttonClass = cn(
        'flex size-9 items-center justify-center rounded-full transition-colors',
        variant === 'outline'
            ? 'border border-navy/40 text-navy hover:bg-navy hover:text-white dark:border-white/60 dark:text-white dark:hover:bg-white dark:hover:text-navy'
            : 'bg-white text-navy shadow-md hover:bg-gold hover:text-white',
    );

    return (
        <div className={cn('flex gap-2', className)}>
            <button
                type="button"
                onClick={onPrev}
                className={buttonClass}
                aria-label="Previous"
            >
                <ArrowLeft className="size-4" />
            </button>
            <button
                type="button"
                onClick={onNext}
                className={buttonClass}
                aria-label="Next"
            >
                <ArrowRight className="size-4" />
            </button>
        </div>
    );
}