components/ToolCard.js

export default function ToolCard({ tool, onClick }) {
  return (
    <div
      onClick={onClick}
      className={`p-6 rounded-lg shadow-md cursor-pointer transition-all hover:shadow-lg ${tool.color}`}
    >
      <div className="flex items-center space-x-4">
        <div className={`p-3 rounded-full ${tool.color.replace('text', 'bg').replace('600', '500/20')}`}>
          {tool.icon}
        </div>
        <h3 className="text-lg font-semibold">{tool.name}</h3>
      </div>
      <p className="mt-2 text-sm text-gray-600">
        {tool.description || 'AI-powered tool to enhance your productivity'}
      </p>
    </div>
  )
}