/**
 * PolicyTableToolbar
 * 
 * Toolbar above the data table with:
 * - Column visibility menu
 * - Density mode toggle (compact/comfortable)
 * - Export button (added later in Phase 5)
 * - Filter controls (added later in Phase 4)
 */

'use client';

import { Button } from '@/components/ui/button';
import { ColumnVisibilityMenu } from './ColumnVisibilityMenu';
import { LayoutList, LayoutGrid } from 'lucide-react';
import type { Table } from '@tanstack/react-table';
import type { PolicySettingRow } from '@/lib/types/policy-table';

interface PolicyTableToolbarProps {
  table: Table<PolicySettingRow>;
  density: 'compact' | 'comfortable';
  onDensityChange: (density: 'compact' | 'comfortable') => void;
}

export function PolicyTableToolbar({
  table,
  density,
  onDensityChange,
}: PolicyTableToolbarProps) {
  return (
    <div className="flex items-center justify-between">
      <div className="flex flex-1 items-center space-x-2">
        {/* Search and filters will be added here in Phase 4 */}
      </div>

      <div className="flex items-center space-x-2">
        {/* Density Toggle */}
        <Button
          variant="outline"
          size="sm"
          className="h-8"
          onClick={() => onDensityChange(density === 'compact' ? 'comfortable' : 'compact')}
        >
          {density === 'compact' ? (
            <>
              <LayoutGrid className="mr-2 h-4 w-4" />
              Comfortable
            </>
          ) : (
            <>
              <LayoutList className="mr-2 h-4 w-4" />
              Compact
            </>
          )}
        </Button>

        {/* Column Visibility Menu */}
        <ColumnVisibilityMenu table={table} />

        {/* Export button will be added here in Phase 5 */}
      </div>
    </div>
  );
}