import React from 'react'
import { Search, Plus } from 'lucide-react'

interface ModelSearchBarProps {
  searchTerm: string
  onSearchChange: (value: string) => void
  onCreateNew: () => void
}

const ModelSearchBar: React.FC<ModelSearchBarProps> = ({
  searchTerm,
  onSearchChange,
  onCreateNew
}) => {
  return (
    <div className="flex items-center justify-between mb-6">
      <div className="relative flex-1 max-w-md">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
        <input
          type="text"
          placeholder="搜索模特编号..."
          value={searchTerm}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent w-full"
        />
      </div>
      
      <button
        onClick={onCreateNew}
        className="ml-4 flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
      >
        <Plus size={20} className="mr-2" />
        新建模特
      </button>
    </div>
  )
}

export default ModelSearchBar