// Componente que hace demasiado
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // Obtiene datos
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);
  
  // Valida datos
  const isValidEmail = (email) => {
    return /\S+@\S+\.\S+/.test(email);
  };
  
  // Formatea fechas
  const formatDate = (date) => {
    return new Date(date).toLocaleDateString();
  };
  
  // Renderiza UI compleja
  return (
    <div className="profile">
      {/* Lógica de renderizado extensa */}
    </div>
  );
}

// Hook personalizado para datos
function useUser(userId) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    UserService.getUser(userId)
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);
  
  return { user, loading };
}

// Utilidades separadas
const validators = {
  isValidEmail: (email) => /\S+@\S+\.\S+/.test(email)
};

const formatters = {
  formatDate: (date) => new Date(date).toLocaleDateString()
};

// Componente enfocado solo en UI
function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);
  
  if (loading) return <LoadingSpinner />;
  
  return <UserCard user={user} />;
}

// Button.jsx - Requiere modificación para cada nuevo tipo
function Button({ type, children, onClick }) {
  let className = "button";
  // Si se añade un nuevo tipo de botón (ej. "warning"),
  // este componente debe ser modificado.
  if (type === "primary") {
    className += " button-primary";
  } else if (type === "secondary") {
    className += " button-secondary";
  } else if (type === "danger") {
    className += " button-danger";
  }

  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
}

// Uso:
// <Button type="primary" onClick={...}>Enviar</Button>
// <Button type="secondary" onClick={...}>Cancelar</Button>

// BaseButton.jsx - Abierto a extensión, cerrado a modificación
// Componente genérico que solo define el comportamiento base
function BaseButton({ children, onClick, className = "" }) {
  return (
    <button className={`button ${className}`} onClick={onClick}>
      {children}
    </button>
  );
}

// PrimaryButton.jsx - Extiende BaseButton sin modificarlo
function PrimaryButton({ children, onClick }) {
  return (
    <BaseButton className="button-primary" onClick={onClick}>
      {children}
    </BaseButton>
  );
}

// DangerButton.jsx - Otro tipo de botón
function DangerButton({ children, onClick }) {
  return (
    <BaseButton className="button-danger" onClick={onClick}>
      {children}
    </BaseButton>
  );
}

// Uso:
// <PrimaryButton onClick={...}>Guardar</PrimaryButton>
// <DangerButton onClick={...}>Eliminar</DangerButton>
// Para un nuevo botón, se crea un nuevo componente (ej. WarningButton)
// sin tocar BaseButton.

          {/*
            Este componente es "gordo" porque espera props que no usa.
            Si la estructura de `User` cambia (ej., `address` ya no existe),
            este componente podría verse afectado sin necesidad.
          */}
          function UserProfile({ id, name, email, address, preferences, orderHistory }) {
            return (
              <div>
                <h2>{name}</h2>
                <p>Email: {email}</p>
                {/* Asumimos que solo mostramos el nombre y el email aquí */}
                {/* `address`, `preferences`, `orderHistory` no se usan */}
              </div>
            );
          }

          // Uso:
          // <UserProfile
          //   id="1"
          //   name="Juan Pérez"
          //   email="juan@example.com"
          //   address={{ street: "Calle Falsa 123" }}
          //   preferences={{ theme: "dark" }}
          //   orderHistory={[]}
          // />
        

          {/* Componente para mostrar solo el nombre del usuario */}
          function UserNameDisplay({ name }) {
            return <h2>{name}</h2>;
          }

          {/* Componente para mostrar el email del usuario */}
          function UserEmailDisplay({ email }) {
            return <p>Email: {email}</p>;
          }

          {/* Componente para mostrar las preferencias del usuario (si las necesita) */}
          function UserPreferencesDisplay({ preferences }) {
            return (
              <div>
                <p>Preferencias: {preferences.theme}</p>
              </div>
            );
          }

          {/*
            Un componente contenedor que ensambla las partes,
            pasando solo las props necesarias a cada subcomponente.
          */}
          function UserProfileContainer({ user }) {
            return (
              <div>
                <UserNameDisplay name={user.name} />
                <UserEmailDisplay email={user.email} />
                {/* Otros componentes específicos aquí, si son necesarios */}
                {user.preferences && <UserPreferencesDisplay preferences={user.preferences} />}
              </div>
            );
          }

          // Uso:
          // const userData = {
          //   id: "1",
          //   name: "Juan Pérez",
          //   email: "juan@example.com",
          //   address: { street: "Calle Falsa 123" },
          //   preferences: { theme: "dark" },
          //   orderHistory: [],
          // };
          // <UserProfileContainer user={userData} />
        

          // services/UserService.js (Implementación Concreta)
          export const UserService = {
            getUser: (id) => {
              // Simula una llamada API real a un endpoint
              return new Promise(resolve => setTimeout(() => resolve({
                id,
                name: 'Usuario Concreto',
                email: 'concreto@example.com'
              }), 200));
            }
          };

          // components/UserProfileDisplay.js (VIOLA DIP)
          import React, { useEffect, useState } from 'react';
          import { UserService } from '../services/UserService'; // <- Dependencia directa a una implementación concreta

          function UserProfileDisplay({ userId }) {
            const [user, setUser] = useState(null);

            useEffect(() => {
              // El componente sabe exactamente cómo obtener los datos
              // y de dónde provienen. Es difícil de cambiar o testear.
              UserService.getUser(userId).then(data => {
                setUser(data);
              });
            }, [userId]);

            if (!user) return <p>Cargando usuario...</p>;

            return (
              <div>
                <h3>Perfil de Usuario (Directo)</h3>
                <p>Nombre: {user.name}</p>
                <p>Email: {user.email}</p>
              </div>
            );
          }

          // Uso: <UserProfileDisplay userId="1" />
        

          // interfaces/IUserService.js (Abstracción/Contrato)
          // Define lo que un servicio de usuario DEBE hacer, sin importar CÓMO.
          // En TypeScript sería una 'interface'. Aquí es implícito.
          /*
            interface IUserService {
              getUser(id: string): Promise<User>;
            }
          */

          // services/ApiUserService.js (Implementación Concreta A)
          export const ApiUserService = {
            getUser: (id) => {
              return new Promise(resolve => setTimeout(() => resolve({
                id,
                name: 'Usuario API',
                email: 'api@example.com'
              }), 200));
            }
          };

          // services/MockUserService.js (Implementación Concreta B, para testing/desarrollo)
          export const MockUserService = {
            getUser: (id) => {
              return new Promise(resolve => setTimeout(() => resolve({
                id,
                name: 'Usuario Mock',
                email: 'mock@example.com'
              }), 100));
            }
          };

          // hooks/useUser.js (Hook Personalizado que depende de una Abstracción)
          import { useEffect, useState } from 'react';

          // El hook recibe el "servicio" como argumento (Inyección de Dependencias)
          export const useUser = (userId, userService) => { // <- Depende de 'userService' (abstracción)
            const [user, setUser] = useState(null);

            useEffect(() => {
              if (userService && userId) {
                // El hook usa el servicio inyectado, sin saber su implementación
                userService.getUser(userId).then(data => {
                  setUser(data);
                });
              }
            }, [userId, userService]);

            return user;
          };

          // components/UserProfileDisplay.js (SIGUE DIP)
          import React from 'react';
          import { useUser } from '../hooks/useUser';
          import { ApiUserService } from '../services/ApiUserService'; // <- Se inyecta aquí, no dentro del componente

          function UserProfileDisplay({ userId }) {
            const user = useUser(userId, ApiUserService); // <- Inyección del servicio

            if (!user) return <p>Cargando usuario...</p>;

            return (
              <div>
                <h3>Perfil de Usuario (Con DIP)</h3>
                <p>Nombre: {user.name}</p>
                <p>Email: {user.email}</p>
              </div>
            );
          }

          // Uso: <UserProfileDisplay userId="1" />
          // Para Testing: <UserProfileDisplay userId="1" userService={MockUserService} />