import React from 'react';
import { Folder, ChevronRight } from 'lucide-react';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

/**
 * Componente de card visual para pastas
 * Exibe uma pasta com ícone e nome, com animação de hover
 */
export const FolderCard = ({ folder, onClick, isDarkMode = true }) => {
  if (!folder) return null;

  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ scale: 1.02, y: -2 }}
      whileTap={{ scale: 0.98 }}
      className={cn(
        "group relative cursor-pointer rounded-xl border transition-all duration-200",
        isDarkMode
          ? "bg-zinc-900/50 border-zinc-800 hover:border-emerald-500/50 hover:bg-zinc-800/50"
          : "bg-white border-slate-200 hover:border-emerald-400 hover:bg-emerald-50/30"
      )}
      onClick={() => onClick?.(folder)}
    >
      <div className="p-6 flex items-center gap-4">
        <div className={cn(
          "flex-shrink-0 w-14 h-14 rounded-lg flex items-center justify-center transition-colors",
          isDarkMode
            ? "bg-emerald-500/10 text-emerald-400 group-hover:bg-emerald-500/20"
            : "bg-emerald-100 text-emerald-600 group-hover:bg-emerald-200"
        )}>
          <Folder size={28} className="stroke-[1.5]" />
        </div>

        <div className="flex-1 min-w-0">
          <h3 className={cn(
            "font-semibold text-sm truncate mb-1",
            isDarkMode ? "text-slate-100" : "text-slate-900"
          )}>
            {folder.nome || folder.caminho?.split('/').pop() || 'Pasta'}
          </h3>
          <p className={cn(
            "text-xs truncate",
            isDarkMode ? "text-slate-400" : "text-slate-500"
          )}>
            {folder.caminho || ''}
          </p>
        </div>

        <ChevronRight 
          size={20} 
          className={cn(
            "flex-shrink-0 transition-transform group-hover:translate-x-1",
            isDarkMode ? "text-slate-400" : "text-slate-400"
          )} 
        />
      </div>

      {/* Efeito de brilho no hover */}
      <div className={cn(
        "absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none",
        isDarkMode
          ? "bg-gradient-to-br from-emerald-500/5 to-transparent"
          : "bg-gradient-to-br from-emerald-100/30 to-transparent"
      )} />
    </motion.div>
  );
};
