import { listContainers } from "@/modules/garden/server/queries";
import { PlantForm } from "@/modules/garden/components/plant-form";

export default async function NewPlantPage({
  searchParams,
}: {
  searchParams: Promise<{ containerId?: string }>;
}) {
  const params = await searchParams;
  const containers = await listContainers();

  return (
    <div className="page-content max-w-xl">
      <div className="flex items-center gap-3 mb-1">
        <a href="/garden" className="btn btn-ghost btn-icon" aria-label="Back to garden">
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="15 18 9 12 15 6" />
          </svg>
        </a>
        <h1 className="page-title">Add Plant</h1>
      </div>
      <PlantForm containers={containers} defaultContainerId={params.containerId ?? null} />
    </div>
  );
}