import BlogLayout from "@/components/blog-configurator/BlogLayout";
import type { BlogArticle } from "@/components/blog-configurator/types/index";

const article: BlogArticle = {
  slug: "my-article",
  date: "2024-01-15",
  author: "John Doe",
  cover: "/cover.jpg", // sau coverVideo: "/video.mp4"
  tags: ["Tech", "Web"],
  ro: {
    title: "Titlul articolului",
    excerpt: "Rezumat scurt...",
    content: [
      { type: "Title", content: "Titlu", level: 2 },
      { type: "Paragraph", content: "Conținut..." },
    ],
  },
  en: {
    title: "Article Title",
    excerpt: "Short summary...",
    content: [
      { type: "Title", content: "Title", level: 2 },
      { type: "Paragraph", content: "Content..." },
    ],
  },
};

<BlogLayout article={article} language="ro" />

{
  type: "Title",
  content: "Titlul meu",
  level: 1, // 1 | 2 | 3 | 4 | 5 | 6
  align: "left", // "left" | "center" | "right"
  backgroundType: "color", // "color" | "gradient" | "image" | "video"
  backgroundValue: "bg-gray-100",
  overlay: "none", // "none" | "tint" | "gradient"
  textColorClass: "text-foreground",
  paddingClass: "p-4 md:p-6",
  marginClass: "mb-4 md:mb-6",
  maxWidthClass: "max-w-4xl",
  titleClassName: "custom-class",
}

{
  type: "Subtitle",
  content: "Subtitlul meu",
  level: 2, // 2 | 3 | 4
  align: "left",
  size: "base", // "sm" | "base" | "lg"
  backgroundType: "color",
  backgroundValue: "bg-gray-50",
}

{
  type: "Paragraph",
  content: "Textul paragrafului...",
  align: "left", // "left" | "center" | "right" | "justify"
  size: "base", // "sm" | "base" | "lg" | "xl"
  backgroundType: "color",
  backgroundValue: "bg-gray-50",
  overlay: "none",
  textColorClass: "text-foreground",
  paddingClass: "p-4 md:p-6",
  paragraphClassName: "custom-class",
}

{
  type: "TitleWithParagraph",
  title: "Titlul meu",
  paragraph: "Paragraful meu...",
  titleLevel: 2, // 2 | 3 | 4
  titleAlign: "left", // "left" | "center" | "right"
  paragraphAlign: "left", // "left" | "center" | "right" | "justify"
  gapClass: "gap-4", // spațiere între titlu și paragraf
  backgroundType: "color",
  backgroundValue: "bg-gray-50",
}

{
  type: "Image",
  src: "/path/to/image.jpg",
  alt: "Descriere imagine",
  width: 1200,
  height: 600,
  objectFit: "cover", // "contain" | "cover" | "fill" | "none" | "scale-down"
  roundedClass: "rounded-lg",
  caption: "Caption opțional",
  backgroundType: "color",
  backgroundValue: "bg-gray-50",
}

{
  type: "Video",
  src: "/path/to/video.mp4",
  poster: "/path/to/poster.jpg", // thumbnail opțional
  autoPlay: false,
  loop: false,
  muted: false,
  controls: true,
  width: 1200,
  height: 600,
  roundedClass: "rounded-lg",
  caption: "Caption opțional",
}

{
  type: "ParagraphWithImage",
  content: "Textul paragrafului...",
  image: {
    src: "/path/to/image.jpg",
    alt: "Descriere",
    width: 600,
    height: 400,
    objectFit: "cover",
    roundedClass: "rounded-lg",
    caption: "Caption opțional",
  },
  layout: "image-right", // "image-left" | "image-right" | "image-top" | "image-bottom"
  paragraphAlign: "left",
  gapClass: "gap-6",
  reverseOnMobile: false, // inversează ordinea pe mobile
}

{
  type: "Gallery",
  images: [
    { src: "/image1.jpg", alt: "Image 1", caption: "Caption 1" },
    { src: "/image2.jpg", alt: "Image 2" },
  ],
  layout: "grid", // "grid" | "masonry" | "carousel"
  columnsClass: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
  gapClass: "gap-4",
  roundedClass: "rounded-lg",
  showCaptions: false,
}

{
  type: "Embed",
  url: "https://www.youtube.com/watch?v=...",
  embedType: "youtube", // "youtube" | "vimeo" | "twitter" | "iframe" | "custom"
  aspectRatio: "16/9", // "16/9" | "4/3" | "1/1" | etc.
  width: 1200,
  height: 600,
  roundedClass: "rounded-lg",
  caption: "Caption opțional",
}

{
  type: "Quote",
  content: "Textul citatului...",
  author: "Nume Autor", // opțional
  authorRole: "Rol Autor", // opțional
  align: "left", // "left" | "center" | "right"
  size: "base", // "sm" | "base" | "lg" | "xl"
  variant: "simple", // "simple" | "bordered" | "highlighted"
  backgroundType: "color",
  backgroundValue: "bg-gray-50",
}

{
  type: "Code",
  code: "const x = 1;",
  language: "javascript", // "typescript" | "javascript" | "css" | etc.
  filename: "example.js", // opțional
  showLineNumbers: false, // opțional
  codeClassName: "custom-class",
  containerClassName: "custom-container",
}

{
  type: "List",
  items: [
    "Element 1",
    "Element 2",
    "Element 3",
  ],
  listType: "unordered", // "unordered" | "ordered"
  align: "left", // "left" | "center" | "right"
  gapClass: "gap-2", // spațiere între items
  itemClassName: "custom-item",
  listClassName: "custom-list",
}

{
  type: "Table",
  headers: ["Header 1", "Header 2", "Header 3"],
  rows: [
    ["Row 1 Col 1", "Row 1 Col 2", "Row 1 Col 3"],
    ["Row 2 Col 1", "Row 2 Col 2", "Row 2 Col 3"],
  ],
  caption: "Caption opțional",
  variant: "simple", // "simple" | "bordered" | "striped"
  tableClassName: "custom-table",
  headerClassName: "custom-header",
  cellClassName: "custom-cell",
}

{
  type: "Divider",
  variant: "solid", // "solid" | "dashed" | "dotted"
  thickness: "medium", // "thin" | "medium" | "thick"
  colorClass: "border-gray-300", // clasă Tailwind pentru culoare
  marginClass: "my-8", // margin vertical
}

{
  type: "SeeMoreArticles",
  title: "Articole recomandate", // opțional
  articles: [
    {
      slug: "article-slug",
      title: "Titlul articolului",
      excerpt: "Rezumat...", // opțional
      cover: "/cover.jpg", // opțional
      date: "2024-01-15", // opțional
    },
  ],
  columnsClass: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
  gapClass: "gap-6",
  cardClassName: "custom-card",
}