'use client';

import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Search, Plus, Trash2 } from 'lucide-react';
import type { DepartmentToolbarProps } from './types';

/**
 * 검색 + 추가/삭제 버튼 툴바
 */
export function DepartmentToolbar({
  totalCount,
  selectedCount,
  searchQuery,
  onSearchChange,
  onAdd,
  onDelete
}: DepartmentToolbarProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
      {/* 검색창 */}
      <div className="relative w-full sm:w-80">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
        <Input
          placeholder="부서명 검색"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-9"
        />
      </div>

      {/* 선택 카운트 + 버튼 */}
      <div className="flex items-center gap-3">
        <span className="text-sm text-muted-foreground whitespace-nowrap">
          전체 {totalCount}건
        </span>
        {selectedCount > 0 && (
          <>
            <span className="text-sm text-muted-foreground">/</span>
            <span className="text-sm text-primary font-medium whitespace-nowrap">{selectedCount}개 항목 선택됨</span>
          </>
        )}
        {selectedCount > 0 && (
          <Button
            size="sm"
            variant="destructive"
            onClick={onDelete}
          >
            <Trash2 className="h-4 w-4 mr-1" />
            선택삭제
          </Button>
        )}
        <Button size="sm" onClick={onAdd}>
          <Plus className="h-4 w-4 mr-1" />
          추가
        </Button>
      </div>
    </div>
  );
}