'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Folder, MoreVertical, Pencil, Trash2 } from 'lucide-react';
import type { Folder as FolderType } from '@/lib/types';

interface Props {
  folder:   FolderType;
  onRename: (folder: FolderType) => void;
  onDelete: (folder: FolderType) => void;
}

export default function FolderCard({ folder, onRename, onDelete }: Props) {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div className="card group relative flex flex-col transition-shadow hover:shadow-md">
      <Link href={`/folders/${folder.id}`} className="flex flex-1 flex-col p-4">
        <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50">
          <Folder className="h-5 w-5 text-blue-600" />
        </div>
        <p className="truncate text-sm font-medium text-slate-800">{folder.name}</p>
        <p className="mt-0.5 text-xs text-slate-400">{folder.created_by_name}</p>
      </Link>

      {/* Action menu */}
      <div className="absolute right-2 top-2">
        <button
          onClick={(e) => { e.preventDefault(); setMenuOpen((o) => !o); }}
          className="rounded-lg p-1.5 text-slate-400 opacity-0 transition-opacity hover:bg-slate-100 group-hover:opacity-100"
        >
          <MoreVertical className="h-4 w-4" />
        </button>

        {menuOpen && (
          <>
            <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
            <div className="absolute right-0 top-8 z-20 w-36 rounded-lg border border-slate-200 bg-white py-1 shadow-lg">
              <button
                onClick={() => { setMenuOpen(false); onRename(folder); }}
                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50"
              >
                <Pencil className="h-3.5 w-3.5" /> Rename
              </button>
              <button
                onClick={() => { setMenuOpen(false); onDelete(folder); }}
                className="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50"
              >
                <Trash2 className="h-3.5 w-3.5" /> Delete
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}