import type { ComponentConfig } from '@reacteditor/core';
import { PanelTop } from 'lucide-react';
import Header, { type HeaderProps } from './header';

const headerConfig: ComponentConfig<HeaderProps> = {
  label: 'Header',
  icon: <PanelTop size={16} />,
  category: 'navigation',
  global: true,
  defaultProps: {
    siteName: 'Next.js',
    links: [
      { label: 'Home', url: '/' },
      { label: 'Editor', url: '/editor' },
      { label: 'Next.js Docs', url: 'https://nextjs.org/docs' },
    ],
  },
  fields: {
    siteName: { label: 'Site name', type: 'text', contentEditable: true },
    links: {
      label: 'Navigation links',
      type: 'array',
      defaultItemProps: { label: 'Link', url: '/' },
      getItemSummary: (item) => item?.label || 'Link',
      arrayFields: {
        label: { label: 'Label', type: 'text', contentEditable: true },
        url: { label: 'URL', type: 'text' },
      },
    },
  },
  render: (props) => <Header {...props} />,
};

export default headerConfig;