import { FileText, ArrowUpRight } from 'lucide-react';

interface FileCardProps {
  title: string;
  content: string;
  onClick: () => void;
}

export default function FileCard({ title, content, onClick }: FileCardProps) {
  // Extract a short preview (first 3 lines or 150 chars)
  const preview = content.slice(0, 150).split('\n').slice(0, 3).join('\n') + (content.length > 150 ? '...' : '');

  return (
    <div 
      onClick={onClick}
      className="group cursor-pointer bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200 w-full max-w-md my-2"
    >
      <div className="flex items-start gap-3">
        <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg group-hover:bg-blue-100 dark:group-hover:bg-blue-900/40 transition-colors">
          <FileText className="w-5 h-5 text-blue-600 dark:text-blue-400" />
        </div>
        <div className="flex-1 min-w-0">
          <h4 className="font-medium text-gray-900 dark:text-gray-100 truncate mb-1">
            {title}
          </h4>
          <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 font-mono bg-gray-50 dark:bg-gray-900/50 p-1.5 rounded border border-gray-100 dark:border-gray-800">
            {preview}
          </p>
        </div>
        <div className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400">
          <ArrowUpRight size={16} />
        </div>
      </div>
    </div>
  );
}