"use client" import * as React from "react" import { Loader2 } from "lucide-react" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { profileSchema, type ProfileValues } from "@/lib/validations" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { SettingsSection } from "@/components/settings/settings-section" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" export interface ProfileFormValues { /** User's full display name. */ name: string /** Primary email address. */ email: string /** Optional short bio or tagline. */ bio?: string } export interface ProfileFormProps { /** Pre-populated form values. */ defaultValues?: Partial /** Called with validated form data on submission. */ onSubmit?: (values: ProfileFormValues) => void | Promise /** Show a loading spinner on the save button. */ loading?: boolean /** Error message displayed above the form. */ error?: string /** Success message displayed above the form. */ success?: string /** Additional class names applied to the root wrapper. */ className?: string } /** * Editable user profile form with Zod-validated name, email, and bio fields. * Uses SettingsSection for structure — no Card wrapper. */ export function ProfileForm({ defaultValues, onSubmit, loading = false, error, success, className, }: ProfileFormProps) { const form = useForm({ resolver: zodResolver(profileSchema), defaultValues: { name: defaultValues?.name ?? "", email: defaultValues?.email ?? "", bio: defaultValues?.bio ?? "", }, }) async function handleSubmit(values: ProfileValues) { await onSubmit?.({ name: values.name, email: values.email, bio: values.bio || undefined, }) } return ( {error && (

{error}

)} {success && (

{success}

)}

( Name )} /> ( Email )} />

( Bio