// src/views/herramientas/LayoutHerramienta.jsx
import React from 'react';
import Link from 'next/link';

export default function LayoutHerramienta({ herramienta, children, darkMode }) {

  return (
    <div className={`min-h-screen pt-4 ${
      darkMode 
        ? 'bg-gray-900' 
        : 'bg-gray-50'
    }`}>
      {/* Header de la herramienta */}
      <div className={`shadow-sm border-b ${
        darkMode
          ? 'bg-gray-800 border-gray-700'
          : 'bg-white border-gray-200'
      }`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            {/* Breadcrumb y título */}
            <div className="flex items-center space-x-4">
              <Link 
                href={`/herramientas#${herramienta.categoria}`}
                className={`${
                  darkMode
                    ? 'text-gray-400 hover:text-gray-200'
                    : 'text-gray-500 hover:text-gray-700'
                }`}
              >
                Herramientas
              </Link>
              <span className={darkMode ? 'text-gray-600' : 'text-gray-400'}>/</span>
              <span className={`capitalize ${
                darkMode
                  ? 'text-gray-400 hover:text-gray-200'
                  : 'text-gray-500 hover:text-gray-700'
              }`}> 
                {herramienta.categoria}
              </span>
              <span className={darkMode ? 'text-gray-600' : 'text-gray-400'}>/</span>
              <h1 className={`grid text-xl text-ellipsis font-semibold ${
                darkMode
                  ? 'text-white'
                  : 'text-gray-800'
              }`}>
                {herramienta.title}
              </h1>
            </div>
          </div>
        </div>
      </div>

      {/* Contenido principal */}
      <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div className="px-4 py-2 sm:px-0">
          {/* Descripción */}
          <div className={`mb-6 p-4 rounded-lg ${
            darkMode
              ? 'bg-blue-900/20'
              : 'bg-blue-50'
          }`}>
            <p className={darkMode ? 'text-blue-200' : 'text-blue-800'}>
              {herramienta.description}
            </p>
          </div>

          {/* Componente dinámico */}
          <div className={`rounded-lg shadow-sm border ${
            darkMode
              ? 'bg-gray-800 border-gray-700'
              : 'bg-white border-gray-200'
          }`}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}