import React from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { PageHeader } from '../../../components/layout/PageHeader/PageHeader';
import { Database, Package, ShoppingCart, Truck, Settings, Users, MessageSquare } from 'lucide-react';

const DatabasePage: React.FC = () => {
  const location = useLocation();
  const isParentRoute = location.pathname === '/app/database';

  if (!isParentRoute) {
    return <Outlet />;
  }

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Mi Panadería"
        description="Consulta y gestiona toda la información de tu panadería"
      />

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-blue-100 rounded-lg">
              <Package className="w-6 h-6 text-blue-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Recetas</h3>
          </div>
          <p className="text-gray-600">Gestiona las recetas de tus productos</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-green-100 rounded-lg">
              <ShoppingCart className="w-6 h-6 text-green-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Pedidos</h3>
          </div>
          <p className="text-gray-600">Consulta el estado de todos los pedidos</p>
        </div>


        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-yellow-100 rounded-lg">
              <Truck className="w-6 h-6 text-yellow-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Proveedores</h3>
          </div>
          <p className="text-gray-600">Gestiona tus proveedores</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-red-100 rounded-lg">
              <Database className="w-6 h-6 text-red-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Inventario</h3>
          </div>
          <p className="text-gray-600">Estado actual del inventario</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-indigo-100 rounded-lg">
              <Settings className="w-6 h-6 text-indigo-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Configuración de Panadería</h3>
          </div>
          <p className="text-gray-600">Configuración general de tu panadería</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-orange-100 rounded-lg">
              <Users className="w-6 h-6 text-orange-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Gestión de Equipo</h3>
          </div>
          <p className="text-gray-600">Administra tu equipo de trabajo</p>
        </div>

        <div className="bg-white rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
          <div className="flex items-center space-x-3 mb-4">
            <div className="p-2 bg-teal-100 rounded-lg">
              <MessageSquare className="w-6 h-6 text-teal-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900">Preferencias de Comunicación</h3>
          </div>
          <p className="text-gray-600">Configura notificaciones y comunicaciones</p>
        </div>
      </div>
    </div>
  );
};

export default DatabasePage;