import React from 'react';
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Message } from "@/types/chat";

interface MessageVariationControlsProps {
  message: Message;
  onSelectVariation?: (messageId: string, variationId: string) => void;
}

export const MessageVariationControls: React.FC<MessageVariationControlsProps> = ({
  message,
  onSelectVariation
}) => {
  if (!message.variations || message.variations.length <= 1 || !onSelectVariation) {
    return null;
  }
  
  // Function to get the current variation index and navigate through variations
  const navigateVariations = (direction: 'prev' | 'next') => {
    const currentIndex = message.activeVariation 
      ? message.variations!.findIndex(v => v.id === message.activeVariation)
      : 0;
      
    let newIndex;
    if (direction === 'prev') {
      newIndex = (currentIndex - 1 + message.variations!.length) % message.variations!.length;
    } else {
      newIndex = (currentIndex + 1) % message.variations!.length;
    }
    
    onSelectVariation(message.id, message.variations![newIndex].id);
  };

  // Get current variation index for display
  const getCurrentVariationIndex = () => {
    return message.activeVariation 
      ? message.variations!.findIndex(v => v.id === message.activeVariation) + 1
      : 1;
  };
  
  return (
    <div className="flex items-center opacity-0 group-hover:opacity-100 transition-opacity bg-background/50 rounded-md border shadow-sm">
      <Button
        variant="ghost"
        size="sm"
        onClick={() => navigateVariations('prev')}
        className="h-6 w-6 p-0 flex items-center justify-center"
        aria-label="Previous variation"
      >
        <ChevronLeft className="h-3 w-3" />
      </Button>
      <span className="text-xs px-1.5 font-medium">
        {getCurrentVariationIndex()}/{message.variations.length}
      </span>
      <Button
        variant="ghost"
        size="sm"
        onClick={() => navigateVariations('next')}
        className="h-6 w-6 p-0 flex items-center justify-center"
        aria-label="Next variation"
      >
        <ChevronRight className="h-3 w-3" />
      </Button>
    </div>
  );
};