"use client";

import { useState, useTransition } from "react";
import { renameSiteAction } from "@/app/(app)/settings/sites/[siteId]/actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function RenameSiteForm({ siteId, name }: { siteId: string; name: string }) {
  const [value, setValue] = useState(name);
  const [error, setError] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  return (
    <form
      className="flex max-w-md items-end gap-2"
      onSubmit={(event) => {
        event.preventDefault();
        setError(null);
        startTransition(async () => {
          const result = await renameSiteAction({ siteId, name: value });
          if ("error" in result) setError(result.error);
        });
      }}
    >
      <div className="flex-1 space-y-1">
        <Label htmlFor="site-name">Nom du site</Label>
        <Input id="site-name" value={value} onChange={(e) => setValue(e.target.value)} />
        {error ? (
          <p role="alert" className="text-destructive text-sm">
            {error}
          </p>
        ) : null}
      </div>
      <Button type="submit" disabled={pending || value.trim().length === 0}>
        Renommer
      </Button>
    </form>
  );
}