'use client';

import { useRouter } from 'next/navigation';
import { ArrowLeft, Users } from 'lucide-react';
import BuddyList from '@/components/BuddyList';
import { useI18n } from '@/i18n/I18nContext';

export default function BuddiesPage() {
    const router = useRouter();
    const { t } = useI18n();

    return (
        <main className="min-h-screen bg-zinc-950 p-4 pb-24">
            <div className="max-w-2xl mx-auto">
                {/* Header */}
                <div className="flex items-center gap-4 mb-8">
                    <button
                        onClick={() => router.back()}
                        className="p-2 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-700 transition-colors"
                    >
                        <ArrowLeft size={20} />
                    </button>
                    <div>
                        <h1 className="text-2xl font-bold text-white">
                            {t('buddy.title')}
                        </h1>
                        <p className="text-sm text-zinc-500">
                            Your tasting companions
                        </p>
                    </div>
                </div>

                {/* Buddy List */}
                <BuddyList />
            </div>
        </main>
    );
}
