import React, { useEffect, useRef } from 'react';

const CaptchaImage = ({ text }: { text: string }) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d');
    if (canvas && ctx) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.font = '26px Arial';
      ctx.fillStyle = '#000';
      ctx.setTransform(1, 0.1, -0.1, 1, 0, 0);
      ctx.fillText(text, 10, 30);
    }
  }, [text]);

  return <canvas ref={canvasRef} width={120} height={40} />;
};

export default CaptchaImage;