Refactor code structure for improved readability and maintainability

app/truyen/[slug]/novel-detail-actions.tsx

@@ -5,6 +5,8 @@ import { BookOpen, BookMarked, BookmarkCheck } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useAuth } from "@/lib/auth-context"
 import { useBookmarks } from "@/lib/bookmark-context"
+import { useRecommendations } from "@/lib/recommendation-context"
+import { toast } from "sonner"
 
 interface NovelDetailActionsProps {
   novelId: string
@@ -15,8 +17,10 @@ interface NovelDetailActionsProps {
 export function NovelDetailActions({ novelId, novelSlug, firstChapterNumber }: NovelDetailActionsProps) {
   const { user } = useAuth()
   const { isBookmarked, toggleBookmark, getProgress } = useBookmarks()
+  const { isRecommended, toggleRecommendation } = useRecommendations()
 
   const bookmarked = isBookmarked(novelId)
+  const recommended = isRecommended(novelId)
   const progress = getProgress(novelId)
 
   const readLink = progress?.lastChapterNumber
@@ -25,6 +29,25 @@ export function NovelDetailActions({ novelId, novelSlug, firstChapterNumber }: N
     ? `/truyen/${novelSlug}/${firstChapterNumber}`
     : "#"
 
+  const handleRecommend = async () => {
+    try {
+      const result = await toggleRecommendation(novelId)
+      if (result.status === "removed") {
+        toast.success("Đã bỏ đề cử")
+        return
+      }
+
+      if (result.status === "exists") {
+        toast.info("Bạn đã đề cử truyện này rồi")
+        return
+      }
+
+      toast.success("Đã đề cử truyện")
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Không thể đề cử truyện")
+    }
+  }
+
   return (
     <div className="flex flex-wrap gap-3">
       <Button asChild className="bg-red-600 hover:bg-red-700 text-white font-bold px-6 border-0 shadow-sm">
@@ -51,11 +74,23 @@ export function NovelDetailActions({ novelId, novelSlug, firstChapterNumber }: N
         </Button>
       )}
       
-      {/* Mocking ThumbsUp (Đề cử) button */}
-      <Button variant="outline" className="font-semibold px-4 border-transparent bg-[#334155] hover:bg-[#475569] text-white" onClick={() => alert("Chức năng đề cử đang phát triển.")}>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 h-4 w-4"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
-        Đề cử
-      </Button>
+      {user ? (
+        <Button
+          variant="outline"
+          className="font-semibold px-4 border-transparent bg-[#334155] hover:bg-[#475569] text-white"
+          onClick={handleRecommend}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 h-4 w-4"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
+          {recommended ? "Bỏ đề cử" : "Đề cử"}
+        </Button>
+      ) : (
+        <Button variant="outline" asChild className="font-semibold px-4 border-transparent bg-[#334155] hover:bg-[#475569] text-white">
+          <Link href="/dang-nhap">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 h-4 w-4"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
+            Đề cử
+          </Link>
+        </Button>
+      )}
     </div>
   )
 }