import { Link } from "react-router-dom";

import { useWalkupContext } from "../hooks/useWalkupContext";

export function DashboardPage() {
  const walkup = useWalkupContext();

  if (!walkup.isTeamSnap) {
    return (
      <section className="container-fluid py-4 d-grid gap-4">
        <div className="row g-4">
          <div className="col-12 col-lg-6">
            <div className="card shadow-sm h-100">
              <div className="card-body d-grid gap-3">
                <p className="text-uppercase small text-body-secondary mb-0">Library</p>
                <h2 className="h4 mb-0">Manage WalkUp clips</h2>
                <p className="text-body-secondary mb-0">
                  Upload audio, trim clips, reorder them, and pin them to players before game day.
                </p>
                <div>
                  <Link to="/library" className="btn btn-primary">
                    Open Library
                  </Link>
                </div>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-6">
            <div className="card shadow-sm h-100">
              <div className="card-body d-grid gap-3">
                <p className="text-uppercase small text-body-secondary mb-0">Gameday</p>
                <h2 className="h4 mb-0">Run the game-day view</h2>
                <p className="text-body-secondary mb-0">
                  Review lineups, check availability, and play the right WalkUp clips during the game.
                </p>
                <div>
                  <Link to="/gameday" className="btn btn-primary">
                    Open Gameday
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="container-fluid py-4 d-grid gap-4">
      <div className="row g-4">
        <div className="col-12 col-lg-6">
          <div className="card shadow-sm h-100">
            <div className="card-body d-grid gap-3">
              <p className="text-uppercase small text-body-secondary mb-0">Library</p>
              <h2 className="h4 mb-0">Manage WalkUp clips</h2>
              <p className="text-body-secondary mb-0">
                Upload audio, trim clips, reorder them, and pin them to players before game day.
              </p>
              <div>
                <Link to="/library" className="btn btn-primary">
                  Open Library
                </Link>
              </div>
            </div>
          </div>
        </div>
        <div className="col-12 col-lg-6">
          <div className="card shadow-sm h-100">
            <div className="card-body d-grid gap-3">
              <p className="text-uppercase small text-body-secondary mb-0">Gameday</p>
              <h2 className="h4 mb-0">Run the game-day view</h2>
              <p className="text-body-secondary mb-0">
                Review lineups, check availability, and play the right WalkUp clips during the game.
              </p>
              <div>
                <Link to="/gameday" className="btn btn-primary">
                  Open Gameday
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
