trello_fake/components/dashboard/dashboard-header.tsx

"use client";

import { Search, LayoutGrid, List, Plus } from 'lucide-react';
import { ThemeToggle } from '@/components/theme-toggle';
import { Button } from '@/components/ui/button';

interface DashboardHeaderProps {
  searchTerm: string;
  onSearchChange: (value: string) => void;
  viewMode: 'grid' | 'list';
  onViewModeChange: (mode: 'grid' | 'list') => void;
  onCreateProject?: () => void;
}

export default function DashboardHeader({
  searchTerm,
  onSearchChange,
  viewMode,
  onViewModeChange,
  onCreateProject
}: DashboardHeaderProps) {
  return (
    <header className="bg-card border-b">
      <div className="px-4 sm:px-6 lg:px-8 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-semibold text-foreground">Dashboard de Proyectos</h1>
            <p className="text-sm text-muted-foreground mt-1">Gestiona y visualiza todos tus proyectos</p>
          </div>
          <div className="flex items-center gap-3">
            <ThemeToggle />
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
              <input
                type="text"
                placeholder="Buscar proyectos..."
                value={searchTerm}
                onChange={(e) => onSearchChange(e.target.value)}
                className="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 text-sm bg-background text-foreground"
              />
            </div>
            <div className="flex gap-1 border rounded-lg p-1">
              <button
                onClick={() => onViewModeChange('grid')}
                className={`p-2 rounded ${viewMode === 'grid' ? 'bg-muted' : 'hover:bg-muted/50'}`}
              >
                <LayoutGrid className="w-4 h-4 text-muted-foreground" />
              </button>
              <button
                onClick={() => onViewModeChange('list')}
                className={`p-2 rounded ${viewMode === 'list' ? 'bg-muted' : 'hover:bg-muted/50'}`}
              >
                <List className="w-4 h-4 text-muted-foreground" />
              </button>
            </div>
            {onCreateProject && (
              <Button onClick={onCreateProject} size="sm">
                <Plus className="w-4 h-4 mr-2" />
                Nuevo proyecto
              </Button>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}