gitfor/platform

import { useState } from "react";
import { changeEmail, resendVerificationEmail } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/components/ui/Button";
import { ErrorBanner, TextField } from "~/components/ui/Field";
import { Badge, Panel } from "~/components/ui/Primitives";

export function EmailPanel({
  email,
  verified,
  hasPassword,
}: {
  email: string;
  verified: boolean;
  hasPassword: boolean;
}) {
  const resend = useAction(resendVerificationEmail, { invalidate: false });
  const change = useAction(changeEmail, { invalidate: false });
  const [notice, setNotice] = useState<string | null>(null);

  return (
    <Panel title="Email">
      <div className="space-y-4 p-4 text-sm">
        <ErrorBanner message={resend.error ?? change.error} />
        {notice && <p className="text-emerald-300">{notice}</p>}
        <div className="flex items-center gap-3">
          <span className="font-medium text-gray-100">{email}</span>
          {verified ? <Badge tone="accent">Verified</Badge> : <Badge tone="amber">Unverified</Badge>}
          {!verified && (
            <Button
              size="sm"
              className="ml-auto"
              pending={resend.pending}
              onClick={async () => {
                if (await resend.run(undefined)) setNotice(`Verification email sent to ${email}.`);
              }}
            >
              Resend verification
            </Button>
          )}