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

interface PitchControlsProps {
    onRun: () => void;
    pitch: number;
}

const PitchControls: React.FC<PitchControlsProps> = ({ onRun, pitch }) => {

    useEffect(() => {
        console.log('Component did mount');

        return () => {
            console.log('Component will unmount');
        };
    }, []);

    const handleRunClick = () => {
        onRun();
        console.log("Run")
    };

    return (
        <div>
            <h2 id="TimeDisplay">Time</h2>
            <button onClick={handleRunClick}>Start Pitch Detection</button>
            <div>
                <strong>Current Pitch:</strong> <span id="pitchValue">{pitch} Hz</span>
            </div>

            <canvas id="pitchCanvas" width="1000" height="500" style={{border: '1px solid #000'}}></canvas>

        </div>
    );
}

export default PitchControls;