import React from 'react';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

interface ModeToggleProps {
  currentMode: 'pet' | 'data' | 'hybrid';
  onModeChange: (mode: 'pet' | 'data' | 'hybrid') => void;
}

const ModeToggle: React.FC<ModeToggleProps> = ({ currentMode, onModeChange }) => {
  return (
    <div className="flex items-center justify-center mb-6">
      <div className="bg-white/90 backdrop-blur-sm rounded-2xl p-2 shadow-lg">
        <ToggleGroup 
          type="single" 
          value={currentMode} 
          onValueChange={(value) => value && onModeChange(value as 'pet' | 'data' | 'hybrid')}
          className="gap-1"
        >
          <ToggleGroupItem 
            value="pet" 
            className="px-6 py-3 rounded-xl font-medium transition-all duration-200 data-[state=on]:bg-purple-500 data-[state=on]:text-white hover:bg-purple-100"
          >
            🐾 Pet Mode
          </ToggleGroupItem>
          <ToggleGroupItem 
            value="hybrid" 
            className="px-6 py-3 rounded-xl font-medium transition-all duration-200 data-[state=on]:bg-blue-500 data-[state=on]:text-white hover:bg-blue-100"
          >
            🔄 Hybrid View
          </ToggleGroupItem>
          <ToggleGroupItem 
            value="data" 
            className="px-6 py-3 rounded-xl font-medium transition-all duration-200 data-[state=on]:bg-gray-800 data-[state=on]:text-white hover:bg-gray-100"
          >
            📊 Data Mode
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
    </div>
  );
};

export default ModeToggle;