src/components/change-bio-modal.tsx

"use client";

import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/auth-context';
import { useSettings } from '@/contexts/settings-context';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Textarea } from './ui/textarea';
import { Loader2 } from 'lucide-react';

export function ChangeBioModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
    const { currentUser, updateUserProfile } = useAuth();
    const { t, addToast, playSound } = useSettings();
    const [bio, setBio] = useState('');
    const [isSaving, setIsSaving] = useState(false);

    useEffect(() => {
        if (currentUser) {
            setBio(currentUser.bio || '');
        }
    }, [currentUser, isOpen]);

    const handleSave = async () => {
        playSound('touch');
        setIsSaving(true);
        await updateUserProfile({ bio });
        setIsSaving(false);
        addToast(t('settingsUpdated'));
        onClose();
    };

    if (!isOpen || !currentUser) return null;

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>{t('bioLabel')}</DialogTitle>
                    <DialogDescription>{t('bioPlaceholder')}</DialogDescription>
                </DialogHeader>
                <div className="py-4">
                    <Textarea 
                        id="bio-modal" 
                        value={bio} 
                        onChange={(e) => setBio(e.target.value)} 
                        placeholder={t('bioPlaceholder')}
                        className="min-h-[100px]"
                        autoFocus
                    />
                </div>
                <DialogFooter>
                    <Button variant="outline" onClick={onClose}>{t('cancel')}</Button>
                    <Button onClick={handleSave} disabled={isSaving}>
                        {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                        {t('saveChanges')}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}