import ContentThumbnailTemplate from "../../components/ContentThumbnailTemplate";

// Mock blog post data for testing
const mockPost1 = {
  slug: "test-post-1",
  frontmatter: {
    title: "Resolving Active Conflicts",
    description:
      "Practical steps for resolving conflicts while maintaining trust, cooperation, and shared goals",
    author: "Author name",
    date: "2025-04-15",
    tags: ["conflict-resolution", "governance", "community"],
  },
  wordCount: 467,
  readingTime: 3,
};

const mockPost2 = {
  slug: "test-post-2",
  frontmatter: {
    title: "Operational Security for Mutual Aid",
    description:
      "Tactics to protect members, secure communication, and prevent Infiltration",
    author: "Author name",
    date: "2025-04-10",
    tags: ["community-building", "sustainability", "structure"],
  },
  wordCount: 523,
  readingTime: 4,
};

const mockPost3 = {
  slug: "test-post-3",
  frontmatter: {
    title: "Making decisions without hierarchy",
    description:
      "A brief guide to collaborative nonhierarchical decision making",
    author: "Author name",
    date: "2025-04-05",
    tags: ["communication", "remote-work", "collaboration"],
  },
  wordCount: 389,
  readingTime: 2,
};

export default function TestThumbnailPage() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">
          ContentThumbnailTemplate Test
        </h1>

        <div className="space-y-12">
          {/* Vertical Variant */}
          <section>
            <h2 className="text-2xl font-semibold text-gray-800 mb-6">
              Vertical Variant
            </h2>
            <div className="flex flex-wrap gap-6">
              <ContentThumbnailTemplate
                post={mockPost1}
                variant="vertical"
                className="mb-4"
              />
              <ContentThumbnailTemplate
                post={mockPost2}
                variant="vertical"
                className="mb-4"
                showTags={false}
              />
              <ContentThumbnailTemplate
                post={mockPost3}
                variant="vertical"
                className="mb-4"
                showReadingTime={false}
              />
            </div>
          </section>

          {/* Horizontal Variant */}
          <section>
            <h2 className="text-2xl font-semibold text-gray-800 mb-6">
              Horizontal Variant
            </h2>
            <div className="space-y-4">
              <ContentThumbnailTemplate post={mockPost1} variant="horizontal" />
              <ContentThumbnailTemplate
                post={mockPost2}
                variant="horizontal"
                showTags={false}
              />
              <ContentThumbnailTemplate
                post={mockPost3}
                variant="horizontal"
                showReadingTime={false}
              />
            </div>
          </section>

          {/* Component Props */}
          <section className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-xl font-semibold text-gray-800 mb-4">
              Component Props
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div>
                <h3 className="font-medium text-gray-700 mb-2">
                  Required Props:
                </h3>
                <ul className="space-y-1 text-gray-600">
                  <li>
                    <code>post</code> - Blog post object with frontmatter
                  </li>
                </ul>
              </div>
              <div>
                <h3 className="font-medium text-gray-700 mb-2">
                  Optional Props:
                </h3>
                <ul className="space-y-1 text-gray-600">
                  <li>
                    <code>variant</code> - "vertical" (default) or "horizontal"
                  </li>
                  <li>
                    <code>className</code> - Additional CSS classes
                  </li>
                  <li>
                    <code>showTags</code> - Show/hide tags (default: true)
                  </li>
                  <li>
                    <code>showReadingTime</code> - Show/hide reading time
                    (default: true)
                  </li>
                </ul>
              </div>
            </div>
          </section>

          {/* Mock Data */}
          <section className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-xl font-semibold text-gray-800 mb-4">
              Mock Data Structure
            </h2>
            <pre className="bg-gray-100 p-4 rounded text-sm overflow-x-auto">
              {JSON.stringify(mockPost1, null, 2)}
            </pre>
          </section>
        </div>
      </div>
    </div>
  );
}