---
import Heading from './heading.astro'

const {
  listing
} = Astro.props

const hasDeviceSupport = Array.isArray( listing.deviceSupport )
---
{ hasDeviceSupport && (
    <div class="device-support w-full">

        <Heading text='Device Support' />

        <div class="device-support-apps md:inline-flex md:w-full max-w-4xl overflow-x-auto overflow-y-visible md:whitespace-no-wrap border rounded-lg divide-y md:divide-y-0 md:divide-x divide-gray-700 space-y-3 md:space-y-0 py-4 px-3">

            { listing.deviceSupport.map( device => (
                <div class="device-container w-full md:w-auto inline-flex flex-col space-y-2 px-2">
                    <a
                        href={ device.endpoint }
                        role="button"
                        class="device-link block rounded-md text-sm font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out text-gray-300 hover:bg-darker hover:neumorphic-shadow p-2"
                        aria-label={ device.ariaLabel }
                    >{ device.emoji } { device.name }</a>

                    <a href={ device.amazonUrl } target="_blank" class="underline text-xs pb-3" rel="noopener">Check Pricing</a>
                </div>
            )) }

        </div>

    </div>
)}