@props(['product'])

<div data-team {{ $attributes->class('bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6') }}>
    <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Team</h2>
    <ul class="space-y-3">
        <li>
            <a href="{{ route('profile.show', $product->user) }}" class="font-medium text-gray-900 dark:text-white hover:text-primary-600">{{ $product->user->name }}</a>
            <span class="block text-sm text-gray-500 dark:text-gray-400">Author</span>
        </li>
        @foreach($product->members as $member)
            <li data-team-members>
                <a href="{{ route('profile.show', $member) }}" class="font-medium text-gray-900 dark:text-white hover:text-primary-600">{{ $member->name }}</a>
                <span class="block text-sm text-gray-500 dark:text-gray-400">{{ $member->pivot->role }}</span>
            </li>
        @endforeach
    </ul>
</div>