My-Weekly-ToDo-List/src/components/DragDropProvider.tsx

import React, { createContext, useContext, ReactNode } from 'react';

// Define types for drag and drop
export interface DragItem {
  type: 'task';
  taskId: string;
  sourceDay: string;
}

export interface DropResult {
  taskId: string;
  targetDay: string;
}

// Create context for drag and drop
interface DragDropContextType {
  dragItem: DragItem | null;
  setDragItem: (item: DragItem | null) => void;
  onDrop: (result: DropResult) => void;
}

const DragDropContext = createContext<DragDropContextType | undefined>(undefined);

// Provider component
export const DragDropProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [dragItem, setDragItem] = React.useState<DragItem | null>(null);

  const onDrop = (result: DropResult) => {
    // This will be implemented by the consumer
    console.log('Dropped task:', result);
  };

  return (
    <DragDropContext.Provider value={{ dragItem, setDragItem, onDrop }}>
      {children}
    </DragDropContext.Provider>
  );
};

// Hook to use drag and drop context
export const useDragDrop = () => {
  const context = useContext(DragDropContext);
  if (!context) {
    throw new Error('useDragDrop must be used within a DragDropProvider');
  }
  return context;
};