'use client';

import { useActionState } from 'react';
import { uploadAvatarAction } from '@/lib/account/upload-actions';
import { idle } from '@/lib/auth/state';
import { FormMessage, SubmitButton } from '@/components/account/form';

export function AvatarForm({ avatarUrl, initial }: { avatarUrl: string | null; initial: string }) {
  const [state, action] = useActionState(uploadAvatarAction, idle);
  const url = (state.data?.url as string | undefined) ?? avatarUrl;
  return (
    <form action={action} className="space-y-3">
      <FormMessage state={state} />
      <div className="flex items-center gap-3">
        {url ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={url} alt="" className="h-16 w-16 rounded-full border border-border object-cover" />
        ) : (
          <span className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-accent text-xl font-semibold text-accent-fg">{initial}</span>
        )}
        <div className="text-xs text-muted">JPEG, PNG or WebP up to 2 MB. Square images look best.</div>
      </div>
      <input type="file" name="file" accept="image/jpeg,image/png,image/webp" required className="block w-full text-xs text-muted file:mr-3 file:rounded-md file:border file:border-border file:bg-elevated file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-fg" />
      <SubmitButton variant="secondary" pendingText="Uploading…">
        Upload avatar
      </SubmitButton>
    </form>
  );
}