Settings 4

"use client";

import { useEffect, useState } from "react";
import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { SettingField } from "@/components/settings-field";
import { SettingsSection } from "@/components/settings-section";

const defaultAvatarSrc = "https://github.com/shabanhr.png";

export function AvatarField() {
	const [src, setSrc] = useState(defaultAvatarSrc);

	useEffect(() => {
		if (!src.startsWith("blob:")) {
			return;
		}
		return () => URL.revokeObjectURL(src);
	}, [src]);
	return (
		<SettingsSection
			action={<Button type="button">Save Changes</Button>}
			hint="Square image recommended. Accepted file types: .png, .jpg, .webp, .avif. Max file size: 2MB."
		>
			<SettingField
				description="This is your avatar image on your Efferd account. Click your avatar to upload a new image."
				htmlFor="avatar"
				label="Your Avatar"
			>
				<div className="flex items-center justify-center gap-2">
					<label className="cursor-pointer" htmlFor="avatar">
						<span className="sr-only">Upload a new avatar</span>
						<Avatar className="size-16">
							<AvatarImage alt="Shaban Haider" src={src} />
							<AvatarFallback>SH</AvatarFallback>
						</Avatar>
						<input
							accept=".png,.jpg,.jpeg,.webp,.avif"
							aria-describedby="avatar-hint"
							className="sr-only"
							id="avatar"
							onChange={(event) => {
								const file = event.target.files?.[0];
								if (!file) {
									return;
								}
								setSrc(URL.createObjectURL(file));
							}}
							type="file"
						/>
					</label>
				</div>
			</SettingField>
		</SettingsSection>
	);
}