<script setup lang="ts">
import { Search, SlidersHorizontal } from 'lucide-vue-next';
import HeroSection from '@/components/ui/internal/HeroSection.vue';
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';

const tooltipCollisionBoundary = ref<Element | undefined>(undefined);
</script>

<template>
    <div class="space-y-16">
        <HeroSection />
        <div class="flex flex-col items-center m-8 gap-8">
            <div class="flex gap-4 max-w-1/4 md:min-w-3xl sm:min-w-64">
                <InputGroup>
                    <InputGroupInput placeholder="Search" />
                    <InputGroupAddon>
                        <Search />
                    </InputGroupAddon>
                </InputGroup>
                <Button>
                    <SlidersHorizontal />
                </Button>
            </div>
            <div class="w-full flex flex-col items-center gap-4 max-w-full xl:max-w-3/4">
                <div class="flex w-full justify-between">
                    <Button variant="ghost" class="text-2xl font-bold tracking-tight">
                        TRENDING NOW
                    </Button>
                    <Button variant="ghost" class="text-muted-foreground text-xl font-semibold tracking-tight">
                        View all
                    </Button>
                </div>
                <div ref="tooltipCollisionBoundary"
                    class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
                    <MediaImageCard image_url="example/jigokuraku.jpg" title="Jigokuraku 2nd Season" type="anime"
                        :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/jujutsukaisen.jpg"
                        title="Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen" type="anime" :tooltipEnabled="true"
                        :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/okiraku.jpg" title="Okiraku Ryoushu no Tanoshii Ryouchi Bouei"
                        type="anime" :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/oshi no ko.jpg" title="[Oshi no Ko] 3rd Season" type="anime"
                        :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/shibou.jpg" title="Shibou Yuugi de Meshi wo Kuu." type="anime"
                        :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/sousounofrieren.jpg" title="Sousou no Frieren 2nd Season"
                        type="anime" :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/tamonkun.jpg" title="Tamon-kun Ima Docchi!?" type="anime"
                        :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/yuusha party.jpg" title="Yuusha Party wo Oidasareta Kiyou Binbou"
                        type="anime" :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/jujutsukaisen.jpg"
                        title="Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi"
                        type="anime" :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/okiraku.jpg"
                        title="Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji" type="anime"
                        :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <MediaImageCard image_url="example/oshi no ko.jpg"
                        title="[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag" type="anime"
                        :tooltipEnabled="true" :tooltipMetadata="{
                            studio: 'MAPPA',
                            type: 'TV Show',
                            episodes: 12,
                            rating: 78,
                            tags: ['action', 'adventure']
                        }" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
                    <SkeletonMediaImageCard />
                </div>
            </div>
        </div>
    </div>
</template>
