trello_fake/components/projects/data-table-toolbar.tsx

"use client";

import { Search, X, SlidersHorizontal, Download, Plus } from "lucide-react";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ProjectStatus, STATUS_CONFIG } from "@/types/project";

interface DataTableToolbarProps {
  searchValue: string;
  onSearchChange: (value: string) => void;
  statusFilter: string;
  onStatusFilterChange: (value: string) => void;
  selectedCount: number;
  onClearFilters: () => void;
}

export function DataTableToolbar({
  searchValue,
  onSearchChange,
  statusFilter,
  onStatusFilterChange,
  selectedCount,
  onClearFilters,
}: DataTableToolbarProps) {
  const isFiltered = searchValue !== "" || statusFilter !== "all";

  return (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex flex-1 items-center gap-2">
        {/* Búsqueda */}
        <div className="relative w-full sm:w-[300px]">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar proyectos..."
            value={searchValue}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-8"
          />
        </div>

        {/* Filtro por estado */}
        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
          <SelectTrigger className="w-[150px]">
            <SelectValue placeholder="Estado" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">Todos</SelectItem>
            {(Object.entries(STATUS_CONFIG) as [ProjectStatus, { label: string }][]).map(
              ([value, { label }]) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              )
            )}
          </SelectContent>
        </Select>

        {/* Botón limpiar filtros */}
        {isFiltered && (
          <Button
            variant="ghost"
            onClick={onClearFilters}
            className="h-9 px-2 lg:px-3"
          >
            Limpiar
            <X className="ml-2 h-4 w-4" />
          </Button>
        )}
      </div>

      <div className="flex items-center gap-2">
        {/* Contador de seleccionados */}
        {selectedCount > 0 && (
          <Badge variant="secondary" className="rounded-sm px-2 font-normal">
            {selectedCount} seleccionado(s)
          </Badge>
        )}

        {/* Opciones de vista */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="sm" className="h-9">
              <SlidersHorizontal className="mr-2 h-4 w-4" />
              Vista
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-[180px]">
            <DropdownMenuLabel>Columnas visibles</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuCheckboxItem checked>
              Referencia
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked>
              Nombre
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked>
              Cliente
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked>
              Estado
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked>
              Progreso
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked>
              Presupuesto
            </DropdownMenuCheckboxItem>
            <DropdownMenuCheckboxItem checked>
              Fechas
            </DropdownMenuCheckboxItem>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Exportar */}
        <Button variant="outline" size="sm" className="h-9">
          <Download className="mr-2 h-4 w-4" />
          Exportar
        </Button>

        {/* Nuevo proyecto */}
        <Button size="sm" className="h-9">
          <Plus className="mr-2 h-4 w-4" />
          Nuevo
        </Button>
      </div>
    </div>
  );
}