import type { ComponentConfig } from '@reacteditor/core';
import { PanelsTopLeft } from 'lucide-react';
import PostsCarousel, { type PostsCarouselProps } from './posts-carousel';

const postsCarouselConfig: ComponentConfig<PostsCarouselProps> = {
  label: 'Posts carousel', icon: <PanelsTopLeft size={16} />, category: 'content',
  defaultProps: {
    heading: 'Explore useful articles, guides, and stories.', description: '', viewAllLabel: 'View all', viewAllUrl: '#',
    posts: [
      { title: 'Add the title of your first article or resource', category: 'Guide', date: 'August 20, 2026', imageUrl: 'https://api.dicebear.com/10.x/glass/svg', imageAlt: 'Abstract glass avatar illustration', url: '#', typeLabel: 'Read' },
      { title: 'Share an update that helps customers learn more', category: 'News', date: 'August 14, 2026', imageUrl: 'https://api.dicebear.com/10.x/glass/svg', imageAlt: 'Abstract glass avatar illustration', url: '#', typeLabel: 'Read' },
      { title: 'Feature a customer story or helpful perspective', category: 'Story', date: 'August 8, 2026', imageUrl: 'https://api.dicebear.com/10.x/glass/svg', imageAlt: 'Abstract glass avatar illustration', url: '#', typeLabel: 'Read' },
      { title: 'Use additional cards to demonstrate the carousel', category: 'Article', date: 'August 1, 2026', imageUrl: 'https://api.dicebear.com/10.x/glass/svg', imageAlt: 'Abstract glass avatar illustration', url: '#', typeLabel: 'Read' },
    ],
  },
  fields: {
    heading: { label: 'Heading', type: 'textarea', contentEditable: true }, description: { label: 'Description', type: 'textarea', contentEditable: true },
    posts: { label: 'Posts', type: 'array', defaultItemProps: { title: 'Post title', category: 'Article', date: '', imageUrl: 'https://api.dicebear.com/10.x/glass/svg', imageAlt: 'Abstract glass avatar illustration', url: '#', typeLabel: 'Read' }, getItemSummary: (item) => item?.title || 'Post', arrayFields: { title: { label: 'Title', type: 'textarea', contentEditable: true }, category: { label: 'Category', type: 'text', contentEditable: true }, date: { label: 'Date', type: 'text', contentEditable: true }, imageUrl: { label: 'Image', type: 'image' }, imageAlt: { label: 'Image alt text', type: 'text' }, url: { label: 'URL', type: 'text' }, typeLabel: { label: 'Type label', type: 'text', contentEditable: true } } },
    viewAllLabel: { label: 'View all label', type: 'text', contentEditable: true }, viewAllUrl: { label: 'View all URL', type: 'text' },
  },
  render: (props) => <PostsCarousel {...props} />,
};

export default postsCarouselConfig;