Blog Post Editor

import { Globe, Newspaper } from "lucide-react"
import BlogPostEditor, { type PostDraft, type PostImage, type PostSite, type SuggestField } from "@/components/ui/blog-post-editor"

// Inline SVG gradients so the demo needs no network or assets.
const gradient = (a: string, b: string) =>
  `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${a}"/><stop offset="1" stop-color="${b}"/></linearGradient></defs><rect width="640" height="360" fill="url(#g)"/></svg>`,
  )}`

const sites: PostSite[] = [
  { key: "blog", label: "Company blog", description: "blog.example.com", icon: <Newspaper /> },
  { key: "docs", label: "Help centre", description: "help.example.com", icon: <Globe /> },
]

const images: PostImage[] = [
  { key: "ocean", label: "Ocean", src: gradient("#5ea1c5", "#134573") },
  { key: "sunset", label: "Sunset", src: gradient("#f59e0b", "#e11d48") },
  { key: "forest", label: "Forest", src: gradient("#34d399", "#0f766e") },
]

const generatedDraft: Partial<PostDraft> = {
  title: "How to Plan a Content Calendar That You Keep",
  slug: "how-to-plan-a-content-calendar-that-you-keep",
  excerpt: "A simple, repeatable way to plan a month of posts without burning out or running out of ideas.",
  metaTitle: "How to Plan a Content Calendar | Step-by-Step Guide",
  metaDescription:
    "Learn how to plan a content calendar you will actually stick to: pick a rhythm, batch your ideas and review results every month.",
  metaKeywords: "content calendar, editorial plan, blog planning",
  ogTitle: "Plan a content calendar you will actually keep",
  ogDescription: "Pick a rhythm, batch your ideas and review every month.",
  content:
    "<h2>Start with a rhythm you can keep</h2><p>Decide how many posts you can really write each week. Two good posts beat five rushed ones, and a steady rhythm is easier for readers to follow.</p><h2>Batch your ideas</h2><p>Set aside one hour to collect topics from customer questions, search suggestions and past comments.</p><ul><li>Group ideas by theme</li><li>Give each one a working title</li><li>Assign a publish date</li></ul><h2>Review every month</h2><p>Look at which posts were read and shared, then plan the next month around what worked.</p>",
}

const wait = (ms: number) => new Promise((r) => setTimeout(r, ms))

// Stand-ins for a real AI service.
const onGenerate = async () => {
  await wait(1000)
  return generatedDraft
}
const onSuggest = async (field: SuggestField, post: PostDraft) => {
  await wait(500)
  const topic = post.title || "your post"
  const suggestions: Record<SuggestField, string> = {
    metaTitle: topic.slice(0, 58),
    metaDescription: `${topic}: a practical walkthrough with clear steps, examples and answers to the questions readers ask most.`.slice(0, 158),
    excerpt: `A practical walkthrough of ${topic.toLowerCase()}, with clear steps and examples.`,
    metaKeywords: topic.toLowerCase().split(/\s+/).filter((w) => w.length > 3).slice(0, 4).join(", "),
  }
  return suggestions[field]
}

export default function Demo() {
  return (
    <div className="min-h-screen w-full bg-background">
      <BlogPostEditor
        heading="New post"
        baseUrl="example.com/blog/"
        sites={sites}
        images={images}
        initial={{ sites: ["blog"] }}
        onGenerate={onGenerate}
        onSuggest={onSuggest}
        onSave={(status, post) => console.log(status, post)}
      />
    </div>
  )
}