import { For, Show } from "solid-js";
import type { ContentBlock } from "~/data/help-center-seed";

interface ArticleContentProps {
  blocks: ContentBlock[];
}

export default function ArticleContent(props: ArticleContentProps) {
  const renderBlock = (block: ContentBlock) => {
    switch (block.type) {
      case "paragraph":
        return (
          <p
            style={{
              margin: "0 0 16px",
              color: "#374151",
              "font-size": "16px",
              "line-height": "1.8",
            }}
          >
            {block.text}
          </p>
        );

      case "heading":
        if (block.level === 2) {
          return (
            <h2
              style={{
                margin: "32px 0 16px",
                color: "#111827",
                "font-size": "24px",
                "font-weight": "700",
                "border-bottom": "1px solid #E5E7EB",
                "padding-bottom": "8px",
              }}
            >
              {block.text}
            </h2>
          );
        }
        return (
          <h3
            style={{
              margin: "24px 0 12px",
              color: "#1F2937",
              "font-size": "18px",
              "font-weight": "600",
            }}
          >
            {block.text}
          </h3>
        );

      case "list":
        if (block.ordered) {
          return (
            <ol
              style={{
                margin: "0 0 20px",
                padding: "0 0 0 24px",
                color: "#374151",
                "font-size": "16px",
                "line-height": "1.8",
              }}
            >
              <For each={block.items}>
                {(item) => (
                  <li style={{ margin: "8px 0" }}>
                    <strong style={{ color: "#111827" }}>{item.split(":")[0]}:</strong>
                    {item.split(":")[1] || ""}
                  </li>
                )}
              </For>
            </ol>
          );
        }
        return (
          <ul
            style={{
              margin: "0 0 20px",
              padding: "0 0 0 24px",
              color: "#374151",
              "font-size": "16px",
              "line-height": "1.8",
              "list-style-type": "disc",
            }}
          >
            <For each={block.items}>
              {(item) => (
                <li style={{ margin: "8px 0" }}>
                  <strong style={{ color: "#111827" }}>{item.split(":")[0]}:</strong>
                  {item.split(":")[1] || ""}
                </li>
              )}
            </For>
          </ul>
        );

      case "section":
        return (
          <div
            style={{
              margin: "24px 0",
              padding: "20px",
              background: "#F9FAFB",
              "border-radius": "12px",
              border: "1px solid #E5E7EB",
            }}
          >
            <h4
              style={{
                margin: "0 0 16px",
                color: "#EA580C",
                "font-size": "14px",
                "font-weight": "700",
                "text-transform": "uppercase",
                "letter-spacing": "0.5px",
              }}
            >
              {block.title}
            </h4>
            <For each={block.blocks}>{(subBlock) => renderBlock(subBlock)}</For>
          </div>
        );

      default:
        return null;
    }
  };

  return (
    <article style={{ color: "#374151" }}>
      <For each={props.blocks}>{(block) => renderBlock(block)}</For>
    </article>
  );
}
