import React from 'react';

function Home({ setActiveTab, setIsTutorialActive }) {

  const handleStartFocus = () => {
    setActiveTab('focus');
  };

  const handleStartTutorial = () => {
    setIsTutorialActive(true);
    setActiveTab('focus');
  };

  return (
    <main id="page-a" className="page">
      <h1>FocusGuard</h1>
      <p>Your productivity monitor assistant.</p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center', marginTop: '30px' }}>
        
        <button className="btn-main" onClick={handleStartFocus} style={{ width: '250px' }}>
          Start Focus
        </button>

        <button className="btn-main" onClick={handleStartTutorial} style={{ width: '250px' }}>
          Tutorial
        </button>
        
      </div>
    </main>
  );
}

export default Home;