import { PlusOutlined } from "@ant-design/icons";
import { Button, Flex, Input } from "antd";
import { useState } from "react";

interface ModelToolbarProps {
  keyword: string;
  onSearch: (value: string) => void;
  onSearchClear: () => void;
  openCreateDialog: () => void;
}

export function ModelToolbar({ keyword, onSearch, onSearchClear, openCreateDialog }: ModelToolbarProps) {
  const [draftKeyword, setDraftKeyword] = useState(keyword);

  return (
    <Flex align="center" gap="small" justify="space-between" wrap="wrap">
      <Input.Search
        allowClear
        enterButton="搜索"
        onChange={(event) => setDraftKeyword(event.target.value)}
        onClear={() => {
          setDraftKeyword("");
          onSearchClear();
        }}
        onSearch={(value) => onSearch(value)}
        placeholder="搜索模型名称或 ID"
        value={draftKeyword}
      />
      <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
        新建模型
      </Button>
    </Flex>
  );
}