import React, { useState } from 'react';
import './App.css';
import VoteCard from './components/VoteCard/VoteCard';
import VotingBoard from './components/VotingBoard/VotingBoard';

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: REACT_APP_FIREBASE_API_KEY,
  authDomain: REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: REACT_APP_FIREBASE_APP_ID,
  measurementId: REACT_APP_FIREBASE_DATABASE_URL,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

function App() {
  const [selectedVote, setSelectedVote] = useState(null);

  const handleVoteClick = (number) => {
    setSelectedVote(number);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Fibonacci Voting App</h1>
      </header>
      
      <div className="App-main">
        <h2>Pick Your Vote</h2>
        <main className="vote-cards-container">
          <VotingBoard />
        </main>
      </div>
    </div>
  );
}

export default App;
