<script setup>
const props = defineProps({
  black: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <nav
    :class="[
      'fixed z-30 w-full border-b drop-shadow-sm border-gray-200 dark:border-gray-700',
      {
        'bg-[#1a1a1a] dark:bg-white': black,
        'bg-white dark:bg-gray-800': !black,
      },
    ]"
  >
    <div class="px-3 py-3 lg:px-5 lg:pl-3">
      <div
        class="grid grid-cols-[auto_minmax(0,650px)_auto] gap-2 md:gap-0 lg:grid-cols-3 items-center"
      >
        <div class="flex items-center justify-start">
          <slot name="left-content" />
        </div>
        <div class="flex items-center justify-center">
          <slot name="center-content" />
        </div>
        <div class="flex items-center justify-end">
          <slot name="right-content" />
        </div>
      </div>
    </div>
  </nav>
</template>
