// Environment Variables
const CMS_DASHBOARD_LOGO_DARK = import.meta.env.CMS_DASHBOARD_LOGO_DARK;
const CMS_DASHBOARD_LOGO_LIGHT = import.meta.env.CMS_DASHBOARD_LOGO_LIGHT;

// Components
import { Link } from '@iconoir/vue';
import { config, fields, collection } from '@keystatic/core';
import { block, inline, wrapper } from '@keystatic/core/content-components'

export default config({
  // https://keystatic.com/docs/user-interface
  ui: {
    brand: {
      name: 'ButterflyVu',
    },
    mark: ({ colorScheme }) => {
      let path = colorScheme === 'dark'
        ? CMS_DASHBOARD_LOGO_DARK // For Dark Theme
        : CMS_DASHBOARD_LOGO_LIGHT; // For Light Theme
    },
    navigation: {
      'Documents': ['docs']
    },
  },
  // https://keystatic.com/docs/local-mode
  storage: {
    kind: 'local',
  },
  // https://keystatic.com/docs/collections
  collections: {
    docs: collection({
      label: 'Documents',
      slugField: 'title',
      path: 'src/content/docs/*',
      format: { contentField: 'content' },
      entryLayout: 'content',
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.mdx({
          label: 'Content',
          formatting: true,
          dividers: true,
          links: true,
        }),
      },
    }),
  },
});