import React, { useEffect, forwardRef } from "react"; 

interface CanvaProps {
    name: string;
    price: string;
}

const Canva = forwardRef<HTMLCanvasElement, CanvaProps>((props, ref) => { 
    useEffect(()=>{
        const canvas = (ref as React.RefObject<HTMLCanvasElement> | null)?.current;

        if (!canvas) return;
        const context = canvas.getContext("2d")
        if (!context) return;
        
        canvas.width = 296
        canvas.height = 152
        context.clearRect(0, 0, canvas.width, canvas.height)
        context.font = "24px 'Inter', Arial"
        context.textAlign = "center"
        context.fillStyle = "#374151"
        context.fillText(props.name, canvas.width/2, 50)
        context.font = "48px 'Inter', Arial";
        context.fillStyle = "#111827";
        context.fillText(`$${props.price}`, canvas.width / 2, 110);
        
    }, [props.name, props.price, ref]); 
    
    return (
        <div style={{
            display: 'flex',
            marginTop: '20px'
        }}>
            <canvas ref={ref} style={{ 
                border: '1px solid black'
            }}></canvas>
        </div>
    )
});

export default Canva;