import React from 'react';
import { ArrowLeft } from 'lucide-react';
import { Link } from 'react-router-dom';

const ToolLayout = ({ title, description, children, icon: Icon }) => {
  return (
    <div className="max-w-6xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <Link
          to="/"
          className="inline-flex items-center text-primary-600 hover:text-primary-700 mb-4"
        >
          <ArrowLeft className="h-4 w-4 mr-2" />
          Back to Tools
        </Link>
        
        <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;