"use client";

import React, { memo, useMemo, type JSX } from "react";

const Container: React.FC<
  React.HTMLAttributes<HTMLDivElement> & { selected?: boolean; index?: number }
> = ({ index, selected, style, ...rest }) => {
  const baseShadow = "0 0 1px 1px rgba(0,0,0,0.2)";

  const containerStyle: React.CSSProperties = {
    width: "10px",
    height: "10px",
    borderRadius: "10px",
    border: "2px solid white",
    boxShadow: selected
      ? `${baseShadow}, 0 0 0 2px var(--n-primary)`
      : baseShadow,
    zIndex: selected ? 3 : 2,
    borderColor: "white",
    transform: "translate(-50%, -50%)",
    position: "absolute",
    cursor: "pointer",
    ...style,
  };

  return <div {...rest} style={containerStyle} data-index={index} />;
};

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  top?: number;
  left: number;
  index?: number;
  selected?: boolean;
  onClick?: () => void;
  color?: string;
}

export default memo(function Pointer({
  top = 0.5,
  left,
  color,
  ...rest
}: Props): JSX.Element {
  const style = useMemo(
    () => ({
      top: `${top * 100}%`,
      left: `${left * 100}%`,
      background: color,
    }),
    [left, top, color]
  );

  return <Container {...rest} className="pointer" style={style} />;
});