supervisor-ui/components/groups/GroupSelector.tsx

'use client';

import { Button } from '@/components/ui/button';
import { LayoutGrid, List } from 'lucide-react';

interface GroupSelectorProps {
  viewMode: 'flat' | 'grouped';
  onViewModeChange: (mode: 'flat' | 'grouped') => void;
}

export function GroupSelector({ viewMode, onViewModeChange }: GroupSelectorProps) {
  return (
    <div className="flex gap-2 items-center">
      <span className="text-sm font-medium text-muted-foreground">View:</span>
      <div className="flex gap-1 border rounded-md p-1">
        <Button
          variant={viewMode === 'flat' ? 'default' : 'ghost'}
          size="sm"
          onClick={() => onViewModeChange('flat')}
          className="gap-2"
        >
          <LayoutGrid className="h-4 w-4" />
          Flat
        </Button>
        <Button
          variant={viewMode === 'grouped' ? 'default' : 'ghost'}
          size="sm"
          onClick={() => onViewModeChange('grouped')}
          className="gap-2"
        >
          <List className="h-4 w-4" />
          Grouped
        </Button>
      </div>
    </div>
  );
}