'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Calendar, FileSpreadsheet, UserPlus, Mail, Settings } from 'lucide-react';

interface EmployeeToolbarProps {
  dateRange: { from?: Date; to?: Date };
  onDateRangeChange: (range: { from?: Date; to?: Date }) => void;
  onAddEmployee: () => void;
  onCSVUpload: () => void;
  onUserInvite: () => void;
  onFieldSettings: () => void;
}

export function EmployeeToolbar({
  dateRange,
  onDateRangeChange,
  onAddEmployee,
  onCSVUpload,
  onUserInvite,
  onFieldSettings,
}: EmployeeToolbarProps) {
  return (
    <Card>
      <CardContent className="p-4">
        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          {/* 날짜 필터 */}
          <div className="flex items-center gap-2">
            <Calendar className="w-4 h-4 text-muted-foreground" />
            <span className="text-sm text-muted-foreground">기간:</span>
            <Button variant="outline" size="sm">
              {dateRange.from && dateRange.to
                ? `${dateRange.from.toLocaleDateString('ko-KR')} - ${dateRange.to.toLocaleDateString('ko-KR')}`
                : '전체 기간'
              }
            </Button>
          </div>

          {/* 액션 버튼들 */}
          <div className="flex flex-wrap items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={onFieldSettings}
              className="gap-1"
            >
              <Settings className="w-4 h-4" />
              <span className="hidden sm:inline">필드 설정</span>
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={onCSVUpload}
              className="gap-1"
            >
              <FileSpreadsheet className="w-4 h-4" />
              <span className="hidden sm:inline">CSV 일괄등록</span>
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={onUserInvite}
              className="gap-1"
            >
              <Mail className="w-4 h-4" />
              <span className="hidden sm:inline">사용자 초대</span>
            </Button>
            <Button
              size="sm"
              onClick={onAddEmployee}
              className="gap-1"
            >
              <UserPlus className="w-4 h-4" />
              <span>사원 등록</span>
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}