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="home-content">
        <div className="home-header">
          <h1 className="home-title">Serena Station Hub</h1>
          <p className="home-subtitle">
            Create or join a radio station to share music with friends
          </p>
        </div>

        <div className="home-actions">
          <button
            className="home-btn home-btn-primary"
            onClick={handleCreateStation}
          >
            <span className="btn-icon">🎵</span>
            Create Station
          </button>

          <button
            className="home-btn home-btn-secondary"
            onClick={handleJoinStation}
          >
            <span className="btn-icon">🎧</span>
            Join Station
          </button>
        </div>
      </div>
    </div>
  );
}

export default Home;