"use client";

import "./invite-delivery.css";

export default function InviteDeliveryChoice({
  value,
  onChange,
}: {
  value: "manual" | "email" | "" | null;
  onChange: (method: "manual" | "email") => void;
}) {
  return (
    <fieldset className="invite-delivery-options">
      <legend className="sr-only">Invite delivery method</legend>
      {(["manual", "email"] as const).map((method) => (
        <button key={method} type="button" aria-pressed={value === method} onClick={() => onChange(method)}>
          <span className="delivery-choice-icon" aria-hidden="true">
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.7"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              {method === "manual" ? (
                <>
                  <path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2" />
                  <path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2" />
                </>
              ) : (
                <>
                  <rect x="3" y="5" width="18" height="14" rx="3" />
                  <path d="m3 7 9 6 9-6" />
                </>
              )}
            </svg>
          </span>
          <span className="delivery-choice-copy">
            <strong>{method === "manual" ? "Copy a link" : "Send an email"}</strong>
            <small>
              {method === "manual"
                ? "They add their email when signing up."
                : "One use, tied to the recipient’s email. You get the link too."}
            </small>
          </span>
          <span className="delivery-choice-check" aria-hidden="true">
            {value === method ? "✓" : ""}
          </span>
        </button>
      ))}
    </fieldset>
  );
}