<div className="inline-flex flex-col gap-1.5">
  {props.showForm && !props.hasEmail ? (
    <div className="flex items-center gap-2">
      <input
        type="email"
        placeholder="Enter your email"
        value={props.emailInput}
        onChange={(e) => props.onEmailChange(e.target.value)}
        className="rounded-md border border-gray-200 px-3 py-1.5 text-sm dark:border-gray-700 dark:bg-gray-900"
      />
      <button
        type="button"
        onClick={props.onJoin}
        disabled={props.isPending || !props.emailInput}
        className="inline-flex items-center gap-1.5 rounded-md border border-blue-200 bg-blue-50 px-3 py-1.5 font-medium text-blue-600 text-sm transition-colors hover:bg-blue-100 disabled:opacity-50 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-400"
      >
        {props.bellIcon}
        Notify Me
      </button>
    </div>
  ) : (
    <button
      type="button"
      onClick={props.subscribed ? props.onLeave : props.onJoin}
      disabled={props.checking || props.isPending}
      className={`inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 font-medium text-sm transition-colors ${
        props.subscribed
          ? "border-blue-200 bg-blue-50 text-blue-600 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-400"
          : "border-gray-200 text-gray-700 hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 dark:border-gray-700 dark:text-gray-300 dark:hover:border-blue-800 dark:hover:bg-blue-950 dark:hover:text-blue-400"
      }`}
    >
      {props.bellIcon}
      {props.subscribed ? "On Waitlist" : "Notify Me"}
    </button>
  )}
  {props.waitingCount > 0 && !props.subscribed && (
    <span className="text-muted-foreground text-xs">
      {props.waitingCount} {props.waitingCount === 1 ? "person" : "people"} waiting
    </span>
  )}
  {props.error && <p className="text-red-600 text-xs">{props.error}</p>}
</div>
