import React from 'react';
import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  const handleCreateStation = () => {
    navigate('/create-station');
  };

  const handleJoinStation = () => {
    navigate('/join-station');
  };

  return (
    <div className="home-container">
      <div className="content">
        <h1 className="title">Radio Station Hub</h1>
        <p className="subtitle">Create or join a radio station to share music with friends</p>
        
        <div className="button-container">
          <button 
            className="action-button primary" 
            onClick={handleCreateStation}
          >
            Create Radio Station
          </button>
          
          <button 
            className="action-button secondary" 
            onClick={handleJoinStation}
          >
            Join Radio Station
          </button>
        </div>
      </div>
    </div>
  );
}

export default Home;
