i want to fix the scaling pelase decrease the scaling like it is not aligneing with the graph blocks and also make it 1 2 3 4 5 and so on not 0 3 6 and so on 
"""
import React from 'react';
import { useDrop } from 'react-dnd';
import GraphBlock from './GraphBlock';
import { ItemTypes } from './constants';

const Graph = ({ blocks, addBlockToGraph, moveBlock, removeBlock }) => {
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: [ItemTypes.WORKOUT_BLOCK, ItemTypes.GRAPH_BLOCK],
    drop: (item, monitor) => {
      if (monitor.didDrop()) {
        return;
      }
      addBlockToGraph(item, blocks.length);
      return { dropped: true };
    },
    collect: (monitor) => ({
      isOver: monitor.isOver({ shallow: true }),
      canDrop: monitor.canDrop(),
    }),
  });

  const dropZoneStyle = isOver && canDrop
    ? 'bg-gray-100 border-2 border-dashed border-indigo-300'
    : 'bg-gray-50 border-2 border-dashed border-gray-200';

  // Calculate cumulative distances for x-axis labels
  const getBlockDistance = (blockType) => {
    switch (blockType) {
      case 'block50':
      case 'block75':
      case 'block30':
        return 3;
      case 'block60_40':
        return 4;
      case 'block80_60_40_20':
      case 'block20_40_60_80':
        return 5;
      default:
        return 3;
    }
  };

  const cumulativeDistances = blocks.reduce((acc, block, index) => {
    const previousDistance = index > 0 ? acc[index - 1] : 0;
    acc[index] = previousDistance + getBlockDistance(block.type);
    return acc;
  }, []);

  return (
    <div className="relative w-full h-[300px] p-6">
      <div
        ref={drop}
        className={`absolute inset-0 rounded-lg transition-colors duration-200 ${dropZoneStyle}`}
      >
        <div className="absolute inset-x-20 inset-y-10 flex items-end">
          {blocks.map((block, index) => (
            <GraphBlock
              key={block.id}
              id={block.id}
              index={index}
              block={block}
              moveBlock={moveBlock}
              removeBlock={removeBlock}
              addBlockToGraph={addBlockToGraph}
              totalBlocks={blocks.length}
            />
          ))}
        </div>

        {/* Y-Axis Labels */}
        <div className="absolute left-4 top-10 bottom-10 flex flex-col justify-between text-sm text-gray-600">
          {[100, 75, 50, 25, 0].map((value) => (
            <div key={value} className="flex items-center justify-end w-12">
              {value}%
            </div>
          ))}
        </div>

        {/* X-Axis Labels */}
        <div className="absolute bottom-4 left-20 right-10">
          <div className="flex justify-between text-sm text-gray-600">
            <div className="text-center">0</div>
            {blocks.length > 0 && cumulativeDistances.map((distance, index) => (
              <div
                key={index}
                className="text-center"
                style={{
                  position: 'absolute',
                  // Calculate the position based on the cumulative distance
                  left: `${(cumulativeDistances[index] / Math.max(1, cumulativeDistances[blocks.length - 1])) * 100}%`,
                  transform: 'translateX(-50%)' 
                }}
              >
                {distance}
              </div>
            ))}
          </div>
        </div>

        {/* Empty State Message */}
        {blocks.length === 0 && (
          <div className="absolute inset-0 flex items-center justify-center">
            <div className={`text-center ${isOver && canDrop ? 'text-indigo-500' : 'text-gray-400'}`}>
              <p className="text-lg font-medium">Drop workout blocks here</p>
              <p className="text-sm mt-2">Drag a block from the left to start building your workout</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Graph;
"""
"""
import React, { useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import { ItemTypes } from './constants';

const GraphBlock = ({
  id,
  index,
  block,
  moveBlock,
  removeBlock,
  addBlockToGraph,
  totalBlocks,
}) => {
  const ref = useRef(null);

  const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.GRAPH_BLOCK,
    item: { id, index, type: ItemTypes.GRAPH_BLOCK },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [{ isOver, canDrop }, drop] = useDrop({
    accept: [ItemTypes.GRAPH_BLOCK, ItemTypes.WORKOUT_BLOCK],
    hover: (item, monitor) => {
      if (!ref.current) {
        return;
      }

      const dragIndex = item.index;
      const hoverIndex = index;

      // Don't replace items with themselves
      if (item.type === ItemTypes.GRAPH_BLOCK && dragIndex === hoverIndex) {
        return;
      }

      // Get the mouse position relative to the drop target
      const hoverBoundingRect = ref.current.getBoundingClientRect();
      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
      const clientOffset = monitor.getClientOffset();
      const hoverClientX = clientOffset.x - hoverBoundingRect.left;

      // Determine if we're on the left or right half of the block
      const isOverLeftHalf = hoverClientX < hoverMiddleX;

      if (item.type === ItemTypes.GRAPH_BLOCK) {
        moveBlock(dragIndex, isOverLeftHalf ? hoverIndex : hoverIndex + 1);
        item.index = isOverLeftHalf ? hoverIndex : hoverIndex + 1;
      }
    },
    drop: (item, monitor) => {
      if (!ref.current) {
        return;
      }

      // Get the mouse position relative to the drop target
      const hoverBoundingRect = ref.current.getBoundingClientRect();
      const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
      const clientOffset = monitor.getClientOffset();
      const hoverClientX = clientOffset.x - hoverBoundingRect.left;

      // Determine if we're on the left or right half of the block
      const isOverLeftHalf = hoverClientX < hoverMiddleX;

      if (item.type === ItemTypes.WORKOUT_BLOCK) {
        // Add the block at the appropriate index
        addBlockToGraph(item, isOverLeftHalf ? index : index + 1);
        return { dropped: true };
      }

      return { dropped: true };
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
      canDrop: !!monitor.canDrop(),
    }),
  });

  drag(drop(ref));

  const opacity = isDragging ? 0.4 : 1;
  const blockWidth = `calc(${100 / totalBlocks}% - 8px)`;

  return (
    <div
      ref={ref}
      className={`relative flex items-end transition-all duration-200`}
      style={{
        opacity,
        width: blockWidth,
        height: '100%',
        marginRight: index !== totalBlocks - 1 ? '8px' : '0',
      }}
    >
      {/* Drop indicators */}
      {isOver && canDrop && (
        <>
          <div className="absolute left-0 top-0 bottom-0 w-1 bg-indigo-500" />
          <div className="absolute right-0 top-0 bottom-0 w-1 bg-indigo-500" />
        </>
      )}

      <div className="flex w-full h-full cursor-move">
        {block.columns.map((height, colIndex) => (
          <div
            key={colIndex}
            className="flex-1 flex flex-col justify-end mx-0.5"
          >
            <div
              className="bg-indigo-500 bg-opacity-50 w-full transition-all duration-200"
              style={{ height: `${height}%` }}
            ></div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GraphBlock;

"""
make it good and perfect aligning perfectly