import React from "react";
import { DragSegmentsTypes } from "@/utils/constants";

const DragSegments = ({ onDragLeave, onDragOver, onDragEnd, onDrop }) => {
  return (
    <>
      <div
        onDragLeave={onDragLeave}
        onDragOver={(e) => onDragOver(e, DragSegmentsTypes.TRUE)}
        onDragEnd={onDragEnd}
        onDrop={(e) => onDrop(e, DragSegmentsTypes.TRUE)}
        className={`true  h-full grow rounded-md border-b-4  border-l-4 border-t-4`}
      ></div>
      <div
        onDragLeave={onDragLeave}
        onDragOver={(e) => onDragOver(e, DragSegmentsTypes.NEXT)}
        onDragEnd={onDragEnd}
        onDrop={(e) => onDrop(e, DragSegmentsTypes.NEXT)}
        className={`next h-full grow rounded-md border-b-4 border-t-4 `}
      ></div>
      <div
        onDragLeave={onDragLeave}
        onDragOver={(e) => onDragOver(e, DragSegmentsTypes.FALSE)}
        onDragEnd={onDragEnd}
        onDrop={(e) => onDrop(e, DragSegmentsTypes.FALSE)}
        className={`false  h-full grow rounded-md border-b-4 border-r-4  border-t-4 `}
      ></div>
    </>
  );
};

export default DragSegments;
