export const dynamic = "force-dynamic";

import Link from "next/link";
import { createEstablishment } from "./actions";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

export default function NewEstablishmentPage({
  searchParams,
}: {
  searchParams?: { error?: string };
}) {
  const error = searchParams?.error;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold">Nouvel établissement</h1>
        <Button variant="outline" asChild>
          <Link href="/superadmin/establishments">Retour</Link>
        </Button>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Créer un établissement</CardTitle>
        </CardHeader>
        <CardContent>
          <form action={createEstablishment} className="space-y-4">
            {error && (
              <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
                {error}
              </div>
            )}
            <div className="space-y-2">
              <label htmlFor="name" className="text-sm font-medium">
                Nom
              </label>
              <Input id="name" name="name" placeholder="Nom de l'établissement" required />
            </div>
            <div className="space-y-2">
              <label htmlFor="slug" className="text-sm font-medium">
                Slug
              </label>
              <Input id="slug" name="slug" placeholder="mon-etablissement" required />
            </div>
            <div className="flex justify-end">
              <Button type="submit">Créer</Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}