import { useState } from "react";
import { Text, Group, Rect } from "react-konva";

type VideoButtonProps = {
  x?: number;
  y?: number;
  onClick?: () => void;
  text?: string;
};

const VideoButton = ({ x, y, onClick, text }: VideoButtonProps) => {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <Group
      x={x}
      y={y}
      onClick={onClick}
      onMouseEnter={(e) => {
        setIsHovered(true);
        const container = e.target.getStage()?.container();
        if (container) container.style.cursor = "pointer";
      }}
      onMouseLeave={(e) => {
        setIsHovered(false);
        const container = e.target.getStage()?.container();
        if (container) container.style.cursor = "default";
      }}
    >
      <Rect
        width={100}
        height={35}
        fill={isHovered ? "#2563eb" : "#3b82f6"}
        cornerRadius={8}
        shadowBlur={isHovered ? 10 : 5}
        shadowOpacity={0.3}
      />
      <Text text={text} fontSize={14} fill="white" width={100} height={35} align="center" verticalAlign="middle" />
    </Group>
  );
};

export default VideoButton;