"use client";

import Link from "next/link";
import { type ReactNode } from "react";
import { Truck } from "@phosphor-icons/react";

interface AppLayoutProps {
  children: ReactNode;
  title?: string;
}

export function AppLayout({ children, title }: AppLayoutProps) {
  return (
    <div className="min-h-[100dvh] bg-bg">
      <header className="border-b border-border bg-surface">
        <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4 md:px-6 lg:px-8">
          <Truck size={24} weight="fill" className="text-primary" />
          <span className="text-base font-semibold text-text-primary">
            美美与共 · 卡派查价
          </span>
          {title && (
            <span className="ml-2 text-sm text-text-secondary">/ {title}</span>
          )}
        </div>
      </header>
      <main className="mx-auto max-w-7xl px-4 py-6 md:px-6 lg:px-8">
        {children}
      </main>
    </div>
  );
}