"use client";

import { FC } from "react";
import { Group, TextInput } from "@mantine/core";
import { useAttributesContext } from "@/app/attributes/contexts/AttributesContext";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
import useIsMobile from "@/hooks/utils/useIsMobile";

const AttributesHeader: FC = () => {
    const {
        attributesActions: { onCreate },
        search,
        setSearch,
    } = useAttributesContext();
    const isMobile = useIsMobile();

    return (
        <Group
            wrap={"nowrap"}
            mt={isMobile ? "xs" : ""}
            mx={isMobile ? "xs" : ""}>
            <InlineButton
                onClick={onCreate}
                w={isMobile ? "100%" : "auto"}>
                Создать атрибут
            </InlineButton>
            <TextInput
                value={search}
                onChange={e => setSearch(e.currentTarget.value)}
                w={isMobile ? "100%" : "auto"}
                placeholder={"Поиск..."}
            />
        </Group>
    );
};

export default AttributesHeader;
