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

/**
 * Componente de card visual para arquivos
 * Exibe um arquivo com ícone e nome, com botão de download
 */
export const FileCard = ({ file, onDownload, isDarkMode = true }) => {
  if (!file) return null;

  const fileName = file.nome || file.caminho?.split('/').pop() || 'Arquivo';
  const fileExtension = fileName.split('.').pop()?.toUpperCase() || 'FILE';

  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-blue-500/50 hover:bg-zinc-800/50"
          : "bg-white border-slate-200 hover:border-blue-400 hover:bg-blue-50/30"
      )}
      onClick={() => onDownload?.(file)}
    >
      <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-blue-500/10 text-blue-400 group-hover:bg-blue-500/20"
            : "bg-blue-100 text-blue-600 group-hover:bg-blue-200"
        )}>
          <FileText 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"
          )}>
            {fileName}
          </h3>
          <p className={cn(
            "text-xs",
            isDarkMode ? "text-slate-400" : "text-slate-500"
          )}>
            {fileExtension}
          </p>
        </div>

        <motion.button
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          className={cn(
            "flex-shrink-0 p-2 rounded-lg transition-colors",
            isDarkMode
              ? "bg-blue-500/10 text-blue-400 hover:bg-blue-500/20"
              : "bg-blue-100 text-blue-600 hover:bg-blue-200"
          )}
          onClick={(e) => {
            e.stopPropagation();
            onDownload?.(file);
          }}
        >
          <Download size={18} />
        </motion.button>
      </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-blue-500/5 to-transparent"
          : "bg-gradient-to-br from-blue-100/30 to-transparent"
      )} />
    </motion.div>
  );
};
