import { ReactNode } from "react";
import { Link, useLocation } from "react-router-dom";
import styles from "./Layout.module.css";

export default function Layout({ children }: { children: ReactNode }) {
  const location = useLocation();
  const isHome = location.pathname === "/";

  return (
    <div className={styles.wrapper}>
      <header className={styles.header}>
        <div className={styles.headerInner}>
          <Link to="/" className={styles.logo}>
            Playable Ads
          </Link>
          {isHome && (
            <Link to="/creatives/new" className={styles.newBtn}>
              + 新建创意
            </Link>
          )}
        </div>
      </header>
      <main className={styles.main}>{children}</main>
    </div>
  );
}
