import { List, Map as MapIcon } from 'lucide-react';
import React from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface ViewSwitcherProps {
  activeTab: 'timeline' | 'map';
  onTabChange: (tab: 'timeline' | 'map') => void;
}

export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({ activeTab, onTabChange }) => {
  return (
    <div className="fixed bottom-[calc(1.5rem+env(safe-area-inset-bottom,0px))] left-1/2 -translate-x-1/2 z-50 sm:hidden">
      <div className="bg-background/80 backdrop-blur-md border border-border/50 p-1 rounded-full shadow-2xl flex items-center gap-1">
        <Button
          variant={activeTab === 'timeline' ? 'default' : 'ghost'}
          size="sm"
          className={cn(
            "rounded-full gap-2 px-6",
            activeTab === 'timeline' ? "shadow-lg" : "text-muted-foreground"
          )}
          onClick={() => onTabChange('timeline')}
        >
          <List className="h-4 w-4" />
          Liste
        </Button>
        <Button
          variant={activeTab === 'map' ? 'default' : 'ghost'}
          size="sm"
          className={cn(
            "rounded-full gap-2 px-6",
            activeTab === 'map' ? "shadow-lg" : "text-muted-foreground"
          )}
          onClick={() => onTabChange('map')}
        >
          <MapIcon className="h-4 w-4" />
          Harita
        </Button>
      </div>
    </div>
  );
};
