@props([
    'title',
    'description',
    'icon' => null,
    'name' => 'User Name',
    'role' => null,
    'link' => '#',
])
<div class="grid grid-rows-[auto_1fr_auto] px-6 lg:px-8 py-10 border border-[#262626] gap-y-4 bg-[#191919] hover:scale-[1.02] hover:shadow-lg transition">

<h1 class="text-lg font-semibold text-[#d8ff99]">{{ $title }}</h1>

<p class="text-zinc-300 text-sm md:text-base">
    {{ $description }}
</p>

<div class="p-4 flex items-center justify-between rounded-md border border-[#272825] bg-[#1b1b1b]">
    
    <!-- Profile (clickable only on mobile) -->
    <a 
    href="{{ $link }}" 
    class="flex flex-row space-x-2 items-center w-full md:w-auto md:pointer-events-none">
    <img class="w-12 h-12 bg-contain bg-no-repeat rounded-full" src="{{ $icon }}" alt="{{ $icon }}"/>
    <div class="flex flex-col leading-tight">
        <h1 class="text-zinc-100 text-sm font-medium">{{ $name }}</h1>
        <p class="text-zinc-400 text-xs">{{ $role ?? 'tidak ada role' }}</p>
    </div>
    </a>

    <!-- Open Website (only desktop) -->
    <div class="bg-[#262626] hidden md:block rounded-md px-4 py-2">
    <a href="{{ $link }}" class="text-sm text-zinc-100">Open Website</a>
    </div>
</div>
</div>