<?php

use Livewire\Component;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Auth;

new class extends Component
{
    public Collection $crews;

    public function mount(): void
    {
        $this->crews = Auth::user()
            ->crews()
            ->withCount(['users', 'patches'])
            ->get();
    }
};
?>

<div class="flex flex-col gap-6 px-4 pt-6 pb-4">
    <div>
        <p class="text-sm text-muted-foreground">Welcome back,</p>
        <h1 class="text-2xl font-bold text-foreground">{{ ucfirst(Auth::user()->name) }}</h1>
    </div>

    <div class="grid grid-cols-3 gap-3">
        <div class="flex flex-col items-center gap-1 rounded-xl border border-border bg-card p-3">
            <div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground mb-2">
                <x-bi-people class="h-6 w-6 text-primary" />
            </div>
            <span class="font-bold text-xl">{{ $crews->count() }}</span>
            <span class="text-muted-foreground text-sm">Groups</span>
        </div>

        <div class="flex flex-col items-center gap-1 rounded-xl border border-border bg-card p-3">
            <div class="grid h-10 w-10 place-items-center rounded-xl bg-accent/15 text-primary-foreground mb-2">
                <x-solar-medal-ribbon-linear class="h-6 w-6 text-accent" />
            </div>
            <span class="font-bold text-xl">0</span>
            <span class="text-muted-foreground text-sm">Earned</span>
        </div>

        <div class="flex flex-col items-center gap-1 rounded-xl border border-border bg-card p-3">
            <div class="grid h-10 w-10 place-items-center rounded-xl bg-card-foreground/15 text-primary-foreground mb-2">
                <x-phosphor-trend-up class="h-6 w-6 text-card-foreground" />
            </div>
            <span class="font-bold text-xl">0</span>
            <span class="text-muted-foreground text-sm">In progress</span>
        </div>
    </div>

    <div class="flex flex-col">
        <div class="flex items-center justify-between mb-5 font-semibold">
            <p class="text-foreground text-base">Your Groups</p>
            <a class="text-primary" href="{{ route('groups') }}">View All</a>
        </div>

        <div class="flex flex-col gap-3">
            @foreach ($crews as $crew)
                <livewire:group-card :crew="$crew" :key="$crew->id" />
            @endforeach
        </div>
    </div>
</div>
