import { setIdentity } from "@/lib/actions/identity";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export default async function WhoAreYouPage({
  searchParams,
}: {
  searchParams: Promise<{ redirectTo?: string }>;
}) {
  const { redirectTo } = await searchParams;

  return (
    <div className="mx-auto flex max-w-sm flex-col justify-center px-4 py-16">
      <Card>
        <CardHeader>
          <CardTitle>Qui es-tu ?</CardTitle>
        </CardHeader>
        <CardContent>
          <form action={setIdentity} className="flex flex-col gap-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="name">Ton prénom</Label>
              <Input
                id="name"
                name="name"
                placeholder="ex. Aissam"
                autoFocus
                required
              />
            </div>
            <input type="hidden" name="redirectTo" value={redirectTo ?? "/"} />
            <Button type="submit">Continuer</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}