import React from 'react';
import Plot from 'react-plotly.js';

export default function EmbeddingPlot({words}) {
  const vector1 = [2, 4, 5];
  const vector2 = [-1, 3, 4];

  return (
    <Plot
      data={[
        {
          // Vector path
          x: [0, 2], // Start at origin and end at (2, -1, 0)
          y: [0, -1],
          z: [0, 0],
          type: "scatter3d",
          mode: "lines+markers",
          line: {
            width: 6, // Line width
            color: "red",
          },
          marker: {
            size: 5,
            color: "red",
          },
        },
        {
          // Cone at the end of the vector
          type: "cone",
          x: [2], // Position of the cone
          y: [-1],
          z: [0],
          u: [2], // Direction of the cone
          v: [-1],
          w: [0],
          sizemode: "absolute",
          sizeref: 0.2,
          showscale: false,
          color: "red",
        },
        {
          // Vector path
          x: [0, -2], // Start at origin and end at (-2, 1, 0)
          y: [0, 1],
          z: [0, 0],
          type: "scatter3d",
          mode: "lines+markers",
          line: {
            width: 6, // Line width
            color: "blue",
          },
          marker: {
            size: 5,
            color: "blue",
          },
        },
        {
          // Cone at the end of the vector
          type: "cone",
          x: [-2], // Position of the cone
          y: [1],
          z: [0],
          u: [-2], // Direction of the cone
          v: [1],
          w: [0],
          sizemode: "absolute",
          sizeref: 0.2,
          showscale: false,
          color: "blue",
        },
      ]}
      
      layout={{
        width: 400,
        height: 400,
        title: "3D Plot of Vectors",
        scene: {
          xaxis: { title: "X Axis" },
          yaxis: { title: "Y Axis" },
          zaxis: { title: "Z Axis" },
        },
        autosize: true,
      }}
    />
  );
};