import React from "react";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { AccountFilterControl } from "@/components/account-filter";

export function PageShell({
  title,
  subtitle,
  children,
  right,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  right?: React.ReactNode;
}) {
  return (
    <div className="mx-auto max-w-7xl space-y-6 px-6 py-8">
      <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
          {subtitle ? (
            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
          ) : null}
        </div>
        {right}
      </header>

      <section className="grid gap-3 lg:grid-cols-[1fr,auto] lg:items-start">
        <div className="space-y-3">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <div className="flex-1">
              <Input placeholder="Search…" />
            </div>
            <Button variant="outline">Search</Button>
          </div>
        <div className="flex flex-wrap gap-3">
            <AccountFilterControl dense />
          </div>


        </div>
      </section>

      <section>{children}</section>
    </div>
  );
}