<template>
    <div class="container flex flex-col gap-8">
        <div class="space-y-1 dark:text-white text-black">
            <p class="text-[24px] font-bold">Product customization</p>
            <p class="text-[15px]">Don't forget to save your customization to be able to add to cart</p>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 gap-5 md:gap-10 ">
            <UInput label="Podaj kolor kanapy narożnej" placeholder="Podaj kolor kanapy narożnej" class="dark:text-white text-black"/>
            <UInput label="Podaj kolor fotela" placeholder="Podaj kolor fotela" class="dark:text-white text-black"/>
            <UInput label="Podaj kolor kwadratu" placeholder="Podaj kolor kwadratu" class="dark:text-white text-black"/>
        </div>
        <div  class="flex justify-end items-end mb-8">
            <UButton class="px-10! bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">Save</UButton>
        </div>
    </div>
</template>