"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: x,
      left: y,
      width: width,
      height: height,
    });
  }, [height, props, width, x, y])
  return (
    <div
      className="absolute border-2 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}
    ></div>
  );
}

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