@props([
    'modalName' => '',
    'shareUrl' => '',
    'title' => ''
])

<div class="block">
    <div class="mb-8">
        <div class="flex justify-between items-center">
            <div class="flex-1 overflow-hidden">
                <h3 class="text-xl font-bold truncate">
                    {{ $title }}
                </h3>
            </div>
            <div class="flex-shrink-0">
                <button class="size-8 flex-center bg-fill-pr rounded-full overflow-hidden text-lab-sc hover:text-lab-pr smoothing" data-modal-dismiss="{{ $modalName }}">
                    <span class="size-6">
                        <x-ui-icon name="x-close" type="solid"></x-ui-icon>
                    </span>
                </button>
            </div>
        </div>
    </div>
        
    <div class="block mb-8">
        @foreach (config('sharing') as $shareOption)
            <a href="{{ $shareOption['url'] . $shareUrl }}" target="_blank" class="flex items-center py-3 px-4 mb-2 bg-fill-fv hover:bg-fill-sc rounded-md smoothing">
                <div class="size-6 flex-shrink-0">
                    <img class="size-full" src="{{ asset($shareOption['icon']) }}" alt="Image">
                </div>
                <div class="flex-1 mx-4 leading-none">
                    <h3 class="text-par-m font-medium">
                        {{ $shareOption['name'] }}
                    </h3>
                </div>
                <div class="flex-shrink-0">
                    <div class="size-4 text-lab-sc overflow-hidden">
                        <x-ui-icon name="chevron-right" type="solid"></x-ui-icon>
                    </div>
                </div>
            </a>
        @endforeach
    </div>

    <div class="flex gap-2">
        <x-forms.action tag="button" data-modal-dismiss="{{ $modalName }}" data-copy-text="some text to be copied" type="reset" :styles="['w-full border border-fill-pr']">
            {{ __('labels.copy-link') }}
        </x-forms.action>
    </div>
</div>