"use client";
import "@/app/globals.css";
import { CSSProperties, useEffect, useState } from "react";

export default function Preview(props: PreviewPropsType) {
  const {x, y, width, height} = props;
  const [style, setStyle] = useState<CSSProperties>({
    top: 0,
    left: 0,
    width: 0,
    height: 0,
  });

  useEffect(() => {
    setStyle({
      top: y,
      left: x,
      width: width,
      height: height,
      // visibility: width * height === 0 ? 'hidden' : 'none'
    });
  }, [props.height, props.width, props.x, props.y])
  return (
    <div
      className="absolute border-2 z-50 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
      style={style}
    >
      {width * height === 0 || `${width} * ${height}`}
      {x * y === 0 || `${x}, ${y}`}
    </div>
  );
}

export type PreviewPropsType = {
  x: number;
  y: number;
  width: number;
  height: number;
};