"use client";

import React from 'react';
import { Search } from 'lucide-react';
import { YearQuarterFilter, type Quarter } from '@/components/molecules/YearQuarterFilter';

interface FiltersProps {
  selectedYear: number;
  selectedQuarter: Quarter | '전체';
  searchTerm: string;
  onYearChange: (year: number) => void;
  onQuarterChange: (quarter: Quarter | '전체') => void;
  onSearchChange: (term: string) => void;
}

export const Filters = ({
  selectedYear,
  selectedQuarter,
  searchTerm,
  onYearChange,
  onQuarterChange,
  onSearchChange,
}: FiltersProps) => {
  return (
    <div className="w-full bg-white p-3 sm:p-4 rounded-lg mb-3 sm:mb-4 shadow-sm">
      {/* 상단: 년도/분기 선택 */}
      <div className="flex flex-wrap items-end gap-3 sm:gap-4 mb-3 sm:mb-4">
        <YearQuarterFilter
          year={selectedYear}
          quarter={selectedQuarter}
          onYearChange={onYearChange}
          onQuarterChange={onQuarterChange}
        />
      </div>

      {/* 하단: 검색 입력 + 버튼 */}
      <div className="flex flex-col gap-1">
        <span className="text-xs font-semibold text-gray-500">검색</span>
        <div className="flex gap-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
            <input
              type="text"
              placeholder="품질관리서번호, 현장명, 인정품목..."
              value={searchTerm}
              onChange={(e) => onSearchChange(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-md text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
            />
          </div>
          <button className="bg-[#1e3a8a] text-white px-3 sm:px-4 py-1.5 rounded-md text-xs sm:text-sm hover:bg-blue-800 transition-colors whitespace-nowrap">
            조회
          </button>
        </div>
      </div>
    </div>
  );
};
