import Link from 'next/link';
import type { Metadata } from 'next';
import { ROUTES } from '@/lib/routes';

export const metadata: Metadata = { title: 'Your Wishlist' };

export default function WishlistPage() {
  return (
    <section className="py-16">
      <div className="container-page max-w-2xl text-center">
        <span className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-beige text-navy-800">
          <svg viewBox="0 0 24 24" className="h-8 w-8" fill="none" stroke="currentColor" strokeWidth={1.6}>
            <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9Z" />
          </svg>
        </span>
        <h1 className="mt-6 text-2xl font-serif font-bold text-navy-800">Your Wishlist is Empty</h1>
        <p className="mt-2 text-sm text-navy-600">Save items you love while browsing the shop — this page is a placeholder for the storefront navigation in the MVP.</p>
        <Link href={ROUTES.shop} className="btn-primary mt-6 inline-flex">Browse the Shop</Link>
      </div>
    </section>
  );
}