no scaling is important as there is a fixed value distance for each block type the single coloumn blocks have value of 3 and the 2 coloumn value has 2 2 and 4 coloumn has 2 1 1 1 ascending one and descending is reverse 111 2

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';

  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 space-x-2">
          {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">
            {blocks.map((_, index) => (
              <div key={index} className="text-center w-full">
                {index + 1}
              </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,
  distance,
  totalDistance,
}) => {
  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;
      }

      // Calculate width fraction based on distance
      const hoverWidthFraction = distance / totalDistance;
      const hoverMiddleX = hoverWidthFraction * 100 / 2; // percentage
      const clientOffset = monitor.getClientOffset();
      const hoverBoundingRect = ref.current.getBoundingClientRect();
      const hoverClientX = clientOffset.x - hoverBoundingRect.left;

      // Determine if we're on the left or right half of the block
      const isOverLeftHalf = (hoverClientX / hoverBoundingRect.width) < 0.5;

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

      const hoverWidthFraction = distance / totalDistance;
      const hoverBoundingRect = ref.current.getBoundingClientRect();
      const clientOffset = monitor.getClientOffset();
      const hoverClientX = clientOffset.x - hoverBoundingRect.left;

      const isOverLeftHalf = (hoverClientX / hoverBoundingRect.width) < 0.5;

      if (item.type === ItemTypes.WORKOUT_BLOCK) {
        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;

  // Calculate width based on distance
  const widthPercentage = (distance / totalDistance) * 100;

  return (
    <div
      ref={ref}
      className={`relative flex items-end transition-all duration-200`}
      style={{
        opacity,
        width: `${widthPercentage}%`,
        height: '100%',
        position: 'relative',
      }}
    >
      {/* 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 space-x-1 px-1">
        {block.columns.map((height, colIndex) => (
          <div
            key={colIndex}
            className="flex-1 flex flex-col justify-end"
          >
            <div
              className="bg-indigo-500 bg-opacity-70 w-full transition-all duration-200 rounded"
              style={{ height: `${height}%` }}
            ></div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GraphBlock;
"""
"""
import React from 'react';
import { useDrag } from 'react-dnd';
import { FiInfo } from 'react-icons/fi';
import { ItemTypes } from './constants';

const WorkoutBlock = ({ children, type, columns }) => {
  const [{ isDragging }, drag] = useDrag({
    type: ItemTypes.WORKOUT_BLOCK,
    item: { type, columns },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  return (
    <div
      ref={drag}
      className={`relative bg-gray-200 rounded-lg overflow-hidden h-20 cursor-move ${
        isDragging ? 'opacity-50' : 'opacity-100'
      }`}
    >
      {children}
    </div>
  );
};

const WorkoutBlocks = () => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md max-w-sm w-full">
      <div className="flex justify-between items-center mb-3">
        <h2 className="text-lg font-semibold">Click or drag the blocks to build workout</h2>
        <FiInfo className="text-gray-400 text-2xl" />
      </div>

      <hr className="border-gray-300 mb-4" />

      <div className="grid grid-cols-3 gap-3">
        <WorkoutBlock type="warm up" columns={[50]}>
          <div className="absolute bottom-0 w-full bg-indigo-500 bg-opacity-50" style={{ height: '50%' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="active" columns={[75]}>
          <div className="absolute bottom-0 w-full bg-indigo-500 bg-opacity-50" style={{ height: '75%' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="running" columns={[30]}>
          <div className="absolute bottom-0 w-full bg-indigo-500 bg-opacity-50" style={{ height: '30%' }}></div>
        </WorkoutBlock>

        <WorkoutBlock type="two step" columns={[60, 40]}>
          <div className="absolute bottom-0 w-full h-full flex gap-1 transform rotate-180">
            {[60, 40].map((height, i) => (
              <div
                key={i}
                className="flex-1 bg-indigo-500 bg-opacity-50"
                style={{ height: `${height}%` }}
              ></div>
            ))}
          </div>
        </WorkoutBlock>

        <WorkoutBlock type="ramp up" columns={[20, 40, 60, 80]}>
          <div className="absolute bottom-0 w-full h-full flex gap-1 transform rotate-180">
            {[20, 40, 60, 80].map((height, i) => (
              <div
                key={i}
                className="flex-1 bg-indigo-500 bg-opacity-50"
                style={{ height: `${height}%` }}
              ></div>
            ))}
          </div>
        </WorkoutBlock>

        <WorkoutBlock type="ramp down" columns={[80, 60, 40, 20]}>
          <div className="absolute bottom-0 w-full h-full flex gap-1 transform rotate-180">
            {[80, 60, 40, 20].map((height, i) => (
              <div
                key={i}
                className="flex-1 bg-indigo-500 bg-opacity-50"
                style={{ height: `${height}%` }}
              ></div>
            ))}
          </div>
        </WorkoutBlock>
      </div>
    </div>
  );
};

export default WorkoutBlocks;