'use client'
import React from "react";
import { FaSlidersH } from "react-icons/fa";
import Recent_Card from "./Recent_Card";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
import Link from "next/link";
import { useContextMenuTriggers } from "@/hooks/useContextMenuTriggers";

const Recent_Creation: React.FC = () => {
  // Use our custom hook for the first card with context menu
  const { handlers } = useContextMenuTriggers({
    longPressDelay: 500,  // 500ms for long press
    doubleClickDelay: 300 // 300ms for double click detection
  });

  return (
    <div className="recent_container w-full">
      <div className="recent_title w-full">
        <h3 className="text-[16px] font-[700]">Recent creations</h3>
        <FaSlidersH className="text-[20px] recent_icon" />
      </div>
      <div className="grid sm:grid-cols-2 md:grid-cols-5 gap-4 mt-2 w-full">
        <ContextMenu>
          <ContextMenuTrigger asChild>
            <Recent_Card
              image="/images/aa31529b95af9b43380b88b11692b0a6f7999878.png"
              title="Good morning Gabe Hager!"
              tag="Ebook"
              description="Edited 13 mins ago"
              // Add our event handlers for mobile support
              {...handlers}
            />
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem><Link href="/creator/reader">View as Reader</Link></ContextMenuItem>
            <ContextMenuItem><Link href="/creator/studio">Continue editing</Link></ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>

        <Recent_Card
          image="/images/d5d8f9fe19a7aed7bf6545a64634eeb37a6b895a.png"
          title="Story of my life (Story by Lak..."
          tag="Ebook"
          description="Edited 5 hours ago"
        />
        <Recent_Card
          image="/images/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png"
          title="Good morning Gabe Hager!"
          tag="Ebook"
          description="Edited 10 mins ago"
        />
        <Recent_Card
          image="/images/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png"
          title="A fantastic saga, the super..."
          tag="Ebook"
          description="Edited 1 month ago"
        />
        <Recent_Card
          image="/images/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png"
          title="Good morning Gabe Hager!"
          tag="Ebook"
          description="Edited 20 hours ago"
        />
      </div>
    </div>
  );
};

export default Recent_Creation;