import { type Component, For, Show } from "solid-js";
import BlogCard from "@/components/BlogCard";
import type { BlogPost } from "@/api/blog";

interface BlogListProps {
  blogs: BlogPost[];
  loading: boolean;
  openBlog: (blog: BlogPost) => void;
  onLike: (blogId: number) => void;
  onEdit: (blog: BlogPost) => void;
  onDelete: (blogId: number) => void;
}

const BlogList: Component<BlogListProps> = (props) => (
  <>
    <Show when={props.loading}>
      <div class="text-center py-12">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
        <p class="mt-2 text-gray-600">Loading blogs...</p>
      </div>
    </Show>

    <Show when={!props.loading && props.blogs.length === 0}>
      <div class="text-center py-12 bg-white rounded-lg shadow-md">
        <p class="text-gray-600">No blogs yet. Be the first to post!</p>
      </div>
    </Show>

    <div class="space-y-4">
      <For each={props.blogs}>
        {(blog) => (
          <BlogCard
            blog={blog}
            openBlog={props.openBlog}
            onLike={props.onLike}
            onEdit={props.onEdit}
            onDelete={props.onDelete}
          />
        )}
      </For>
    </div>
  </>
);

export default BlogList;