<script setup lang="ts">
import { useLayout } from "../../composables/useLayout";

const { surfaces, surface, updateColors } = useLayout();
</script>

<template>
    <div
        class="absolute top-16 right-0 w-64 p-4 bg-white dark:bg-surface-900 rounded-md shadow-lg border border-surface-200 dark:border-surface-700 origin-top z-50 hidden"
    >
        <div class="flex flex-col gap-4">
            <div>
                <span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color de Superficie</span>
                <div class="pt-2 flex gap-2 flex-wrap justify-between">
                    <button
                        v-for="s of surfaces"
                        :key="s.name"
                        type="button"
                        :title="s.name"
                        :class="[
                            'border border-surface-200 dark:border-surface-700 w-5 h-5 rounded-full p-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2',
                            {
                                'ring-2 ring-offset-2 ring-surface-950 dark:ring-surface-0': surface === s.name,
                            },
                        ]"
                        :style="{ backgroundColor: s.palette['500'] }"
                        @click="updateColors('surface', s.name)"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
button:focus-visible {
    outline: 2px solid var(--p-primary-500);
    outline-offset: 2px;
}
</style>
