import {FC} from "react";
import styles from './LeadsPage.module.css';
import Board from "../../../components/Dnd/Board/Board.tsx";
import {Button, TextInput} from "@mantine/core";
import {DragDropContext} from "@hello-pangea/dnd";
import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
import {DateTimePicker} from "@mantine/dates";

export const LeadsPage: FC = () => {

    return (
        <div className={styles['container']}>
            <div className={styles['header']}>

                <TextInput
                    radius={0}
                    placeholder={"Поиск и фильтры"}
                    size={"xl"}
                    className={styles['header-input']}
                />
                <Button
                    radius={0}
                    color={"gray"}
                    variant={'default'}
                    className={styles['header-button']}
                >Поиск</Button>
            </div>
            <div className={styles['boards']}>
                <DragDropContext onDragEnd={() => {
                }}>
                    <Board title={"Ожидает приемки"} withCreateButton droppableId={"AWAITING_ACCEPTANCE"}/>
                    <Board title={"Упаковка"} droppableId={"PACKAGING"}/>
                    <Board title={"Ожидает отгрузки"} droppableId={"AWAITING_SHIPMENT"}/>
                    <Board title={"Ожидает оплаты"} droppableId={"AWAITING_PAYMENT"}/>
                    <Board title={"Завершена"} droppableId={"COMPLETED"}/>

                </DragDropContext>

            </div>
        </div>
    )
}