import { FC } from "react";
import { Flex, TextInput } from "@mantine/core";
import { useClientsContext } from "@/app/clients/contexts/ClientsContext";
import useClientsActions from "@/app/clients/hooks/useClientsActions";
import InlineButton from "@/components/ui/InlineButton/InlineButton";

const ClientMobileHeader: FC = () => {
    const { search, setSearch } = useClientsContext();
    const { onCreateClick } = useClientsActions();

    return (
        <Flex
            gap={"xs"}
            px={"xs"}
            pt={"xs"}>
            <InlineButton
                w={"100%"}
                onClick={onCreateClick}>
                Создать клиента
            </InlineButton>
            <TextInput
                w={"100%"}
                placeholder={"Поиск"}
                value={search}
                onChange={e => setSearch(e.target.value)}
            />
        </Flex>
    );
};

export default ClientMobileHeader;
