import Link from "next/link";
import { Compass, ArrowUpRight, Globe2 } from "lucide-react";
export function Brand() {
  return (
    <Link href="/" className="brand" aria-label="MineGeo home">
      <span className="brand-cube">
        <span />
      </span>
      Mine<span>Geo</span>
      <sup>BETA</sup>
    </Link>
  );
}
export function Header() {
  return (
    <header className="site-header">
      <div className="header-inner">
        <Brand />
        <nav aria-label="Main navigation">
          <Link href="/servers">Explore servers</Link>
          <Link href="/downloads">Create a map</Link>
          <Link href="/about">How to play</Link>
        </nav>
        <Link href="/dashboard" className="header-account">
          My expedition <ArrowUpRight size={15} />
        </Link>
      </div>
    </header>
  );
}
export function Footer() {
  return (
    <footer className="site-footer">
      <div>
        <Brand />
        <p>A familiar world. A whole new perspective.</p>
      </div>
      <div>
        <span>
          <Globe2 size={14} /> English
        </span>
        <Link href="/downloads">Tools & downloads</Link>
        <Link href="/moderation">Moderation</Link>
      </div>
      <p className="disclaimer">
        An independent community project. Not affiliated with Mojang or
        Microsoft.
      </p>
    </footer>
  );
}
export function EmptyState({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="empty-state">
      <Compass size={36} />
      <h3>{title}</h3>
      <p>{children}</p>
      <Link className="button primary" href="/downloads">
        Create the first map <ArrowUpRight size={16} />
      </Link>
    </div>
  );
}