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

</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">
                <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>
                    Test
                </div>
            </div>
        </div>
    </div>
</template>
