"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import ResourceCard from "./ResourceCard";
import type { Book } from "@/lib/schemas/books";

export default function RecommendedBooks({ books }: { books: Book[] }) {
  const [displayCount, setDisplayCount] = useState(4);

  if (!books || books.length === 0) return null;

  const visibleBooks = books.slice(0, displayCount);
  const hasMore = displayCount < books.length;

  return (
    <div className="max-w-6xl mx-auto px-6 sm:px-12 mt-8 mb-8 pt-16 border-t border-border/50">
      <div className="flex items-center justify-between mb-8">
        <h2 className="text-2xl font-bold tracking-tight">You might also like</h2>
        {hasMore && (
          <Button 
            variant="outline" 
            className="text-foreground transition-all hover:bg-muted"
            onClick={() => setDisplayCount((prev) => prev + 4)}
          >
            Load more
          </Button>
        )}
      </div>
      
      <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {visibleBooks.map((recBook) => (
          <li key={recBook.id} className="animate-in fade-in zoom-in-95 duration-300">
            <ResourceCard book={recBook} />
          </li>
        ))}
      </ul>
    </div>
  );
}