import Image from "next/image";
import { ExternalLink, Ellipsis, Trash2 } from 'lucide-react';

// Sample data for recent designs
const recentDesigns = [
  {
    icon: "/recent-image-1.png",
    title: "Good morning Gabe ...",
  },
  {
    icon: "/recent-image-2.png",
    title: "Daphne's first eBook...",
  },
  {
    icon: "/recent-image-3.png",
    title: "Story of my life (Story...",
  },
  {
    icon: "/recent-image-4.png",
    title: "Good morning Gabe ...",
  },
  {
    icon: "/recent-image-5.png",
    title: "A fantastic saga, the...",
  },
];

/**
 * RecentDesign Component
 * Displays a sidebar with recent designs and a trash section
 * @returns JSX.Element
 */
export default function RecentDesign() {
  return (
    <div className="border-t md:border-t-0 md:border-r border-[#D9D7D7] w-full md:w-[300px] flex flex-col h-auto md:h-screen justify-between p-4 md:px-4 md:pt-6 md:pb-4">
      {/* Logo and Title Section */}
      <div>
        <div className="flex flex-col items-center mb-6 md:mb-12">
          <img src="/logo.png" alt="Wodey logo" className="w-[120px] md:w-[157px] h-auto md:h-[53px]" />
        </div>
        
        {/* Recent Designs Header */}
        <div className="text-[#27275A] text-[12px] font-[400] mb-2 pl-1">Recent designs</div>
        
        {/* Recent Designs List */}
        <div className="grid grid-cols-2 md:flex md:flex-col gap-2">
          {recentDesigns.map((design, idx) => (
            <div 
              key={idx} 
              className="flex items-center bg-white rounded-lg py-2 px-2 hover:bg-[#F5F6FA] group transition cursor-pointer"
            >
              {/* Design Icon */}
              <div className="w-6 h-6 md:w-8 md:h-8 flex items-center justify-center mr-2">
                <Image src={design.icon} alt="icon" width={24} height={24} className="w-5 h-5 md:w-7 md:h-7" />
              </div>
              
              {/* Design Title */}
              <span className="flex-1 text-[10px] text-[#27275A] truncate max-w-[100px] md:max-w-[120px] font-[400]">
                {design.title}
              </span>
             
              {/* Action Buttons */}
              <button className="p-1 rounded hover:bg-gray-100 transition">
                <div className="flex items-center gap-1 md:gap-2">
                  <ExternalLink className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
                  <Ellipsis className="text-[#27275A] bg-[#f2f2f3] border border-gray-200 rounded-[8px] p-1 w-4 h-4 md:w-5 md:h-5" />
                </div>
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Trash Section */}
      <div className="flex items-center gap-2 pl-1 cursor-pointer hover:bg-[#F5F6FA] rounded-lg p-2 mt-4 md:mt-0">
        <Trash2 className="text-[#27275A] w-[16px] md:w-[20px]" />
        <span className="text-[#27275A] text-[12px] md:text-[14px] font-[400]">Trash</span>
      </div>
    </div>
  );
}