import React from 'react';

const ToolLayout = ({ title, description, children, icon: Icon }) => {
  return (
    <div className="max-w-6xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center space-x-3 mb-2">
          {Icon && <Icon className="h-8 w-8 text-primary-600" />}
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
            {title}
          </h1>
        </div>
        
        {description && (
          <p className="text-gray-600 dark:text-gray-300 text-lg">
            {description}
          </p>
        )}
      </div>

      {/* Tool Content */}
      <div className="space-y-6">
        {children}
      </div>
    </div>
  );
};

export default ToolLayout;