import React, { useMemo } from "react";
import Card from "../ui/Card";
import Button from "../ui/Button";
import { LuPlus } from "react-icons/lu";
import { normalizeHostname } from "../../utils/domains";

export default function DomainCreateCard({
  hostname,
  setHostname,
  creating,
  onCreate,
}) {
  const normalized = useMemo(() => normalizeHostname(hostname), [hostname]);
  const canCreate = !!normalized && !creating;

  return (
    <Card className="bg-white dark:bg-[#16325b]" padding="lg">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <div>
          <div className="text-sm font-extrabold">ثبت دامنه جدید</div>
          <div className="text-xs opacity-70 mt-1">
            فقط hostname وارد کن (بدون http/https). مثل: <b>netnest.org</b>
          </div>
        </div>

        <Button
          type="button"
          onClick={onCreate}
          disabled={!canCreate}
          loading={creating}
          leftIcon={<LuPlus className="w-4 h-4" />}
          className="!bg-[#43BEFF] hover:!bg-[#34b6ff] !text-white"
        >
          {creating ? "در حال ثبت..." : "ثبت دامنه"}
        </Button>
      </div>

      <div className="mt-4">
        <input
          value={hostname}
          onChange={(e) => setHostname(e.target.value)}
          placeholder="مثلاً: netnest.org"
          className="w-full px-4 py-3 rounded-xl shadow bg-[#A1E3F980] dark:bg-[#001F3F]
            border border-black/10 dark:border-white/10 outline-none text-sm
            text-black dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40"
          inputMode="url"
        />

        <div className="mt-2 text-[11px] text-black/50 dark:text-white/60">
          مقدار نهایی که ارسال میشه:{" "}
          <b className="text-black dark:text-white">{normalized || "—"}</b>
        </div>
      </div>
    </Card>
  );
}
