'use client';

import { useRouter } from 'next/navigation';
import { ArrowLeft, Heart, Plus } from 'lucide-react';
import { useI18n } from '@/i18n/I18nContext';

export default function WishlistPage() {
    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('nav.wishlist')}
                        </h1>
                        <p className="text-sm text-zinc-500">
                            Bottles you want to try
                        </p>
                    </div>
                </div>

                {/* Empty State */}
                <div className="flex flex-col items-center justify-center py-20 text-center">
                    <div className="p-4 bg-zinc-900 rounded-full mb-4">
                        <Heart size={32} className="text-zinc-600" />
                    </div>
                    <h2 className="text-lg font-bold text-white mb-2">
                        Coming Soon
                    </h2>
                    <p className="text-sm text-zinc-500 max-w-xs">
                        Your wishlist will appear here. You'll be able to save bottles you want to try in the future.
                    </p>
                </div>
            </div>
        </main>
    );
}
