import { useAvatarUpload } from "~/hooks/use-avatar-upload";
import { ErrorBanner } from "~/ui/Callout";
import { Avatar } from "~/ui/Avatar";
import { Panel } from "~/ui/Panel";
import { buttonClass } from "~/ui/Button";

export function AvatarPanel({ account, avatarUrl }: { account: string; avatarUrl: string | null }) {
  const avatar = useAvatarUpload(account);
  return (
    <Panel title="Profile picture">
      <div className="flex items-center gap-4 p-4 text-sm">
        <Avatar name={account} size="lg" src={avatarUrl ? `${avatarUrl}?s=160` : null} />
        <div className="space-y-2">
          <ErrorBanner message={avatar.error} />
          <label className={buttonClass("secondary", "sm", avatar.pending ? "opacity-60" : undefined)}>
            {avatar.pending ? "Uploading…" : "Upload a picture"}
            <input
              type="file"
              accept="image/png,image/jpeg,image/gif,image/webp"
              className="sr-only"
              disabled={avatar.pending}
              onChange={(event) => {
                const file = event.currentTarget.files?.[0];
                if (file) avatar.upload(file);
                event.currentTarget.value = "";
              }}
            />
          </label>
          <p className="text-xs text-kumo-subtle">PNG, JPEG, GIF or WebP, up to 1 MB.</p>
        </div>
      </div>
    </Panel>
  );
}