import { ComponentConfig } from "@reacteditor/core";
import { imageField } from "@reacteditor/plugin-media/field";
import { Mail } from "lucide-react";
import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
import { frontendAiMediaAdapter } from "@/services/media-adapter";

export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
  label: "Newsletter",
  icon: <Mail size={16} />,
  category: "content",
  defaultProps: {
    tagline: "Stay in the loop",
    heading: "Letters from the studio",
    subheading:
      "New collections, mill stories, and the occasional invitation to in-person events. Twice a month.",
    buttonLabel: "Subscribe",
    endpoint: "",
    imageUrl:
      "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
    layout: "split",
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "text", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
    buttonLabel: { label: "Button label", type: "text", contentEditable: true },
    endpoint: { label: "Submit endpoint", type: "text" },
    imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
    layout: {
      label: "Layout",
      type: "radio",
      options: [
        { label: "Split (image + form)", value: "split" },
        { label: "Stacked (centered)", value: "stacked" },
      ],
    },
  },
  render: (props) => <NewsletterCta {...props} />,
};