@extends('layouts.account')

@section('title', 'Избранное')

@section('content')
<h1 class="text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[24px]">Избранное</h1>

{{-- Записи с удалёнными товарами (product === null) не показываем — считаем
     раздел пустым, если после этого показывать нечего. --}}
@php($items = $favorites->filter(fn ($f) => $f->product))

@if ($items->isEmpty())
    <div class="mt-6 rounded-[var(--radius-lg)] border border-[var(--color-line)] px-6 py-14 text-center sm:py-16">
        <div class="mx-auto grid h-14 w-14 place-items-center rounded-full bg-[var(--color-primary-soft)] text-[var(--color-primary)]">
            <i data-lucide="heart" class="h-7 w-7"></i>
        </div>
        <p class="mt-4 text-lg font-extrabold text-[var(--color-ink)]">В избранном пока пусто</p>
        <p class="mx-auto mt-1.5 max-w-md text-sm text-[var(--color-muted)]">
            Нажимайте на ♡ у понравившихся товаров — они будут собираться здесь, чтобы вы могли вернуться к ним позже.
        </p>
        <a href="{{ route('catalog.index') }}"
           class="mt-5 inline-flex items-center gap-2 rounded-[var(--radius-md)] bg-[var(--color-primary)] px-4 py-2.5 text-sm font-bold text-white transition hover:bg-[var(--color-primary-dark)]">
            <i data-lucide="layout-grid" class="h-4 w-4"></i>Перейти в каталог
        </a>
    </div>
@else
    <div class="mt-5 grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 xl:grid-cols-4">
        @foreach ($items as $favorite)
            <x-product-card :product="$favorite->product" />
        @endforeach
    </div>
@endif
@endsection