import { resendVerificationAction } from "@/app/actions/settings";
import { ActionButton } from "./action-button";
import { MailIcon } from "./icons";
import { Alert } from "./ui";

/** For a signed-in person who hasn't confirmed their email address yet (lib/emails.ts). */
export function VerifyEmailNotice({ email }: { email: string }) {
  return (
    <Alert kind="info">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <span>
          Confirm your email address: we sent a link to <strong className="font-semibold">{email}</strong>. Until then, you won’t get
          emails about invitations and your account.
        </span>
        <ActionButton action={resendVerificationAction} icon={<MailIcon />}>
          Send Again
        </ActionButton>
      </div>
    </Alert>
  );
}