import { TrendingUp, Shield, Zap } from 'lucide-react';

const products = [
  {
    id: 1,
    name: 'Cuenta Rendimiento Objetivo',
    description: 'Objetivo de 5% mensual con estrategia conservadora',
    agent: 'Atlas',
    profile: 'Conservador',
    targetReturn: '3-5%',
    maxDrawdown: '5%',
    icon: Shield,
  },
  {
    id: 2,
    name: 'Cuenta Variable',
    description: 'Rendimiento variable con reparto de utilidades 50/50',
    agent: 'Orion',
    profile: 'Moderado',
    targetReturn: '5-10%',
    maxDrawdown: '10%',
    icon: TrendingUp,
  },
  {
    id: 3,
    name: 'Cuenta Alta Volatilidad',
    description: 'Máximo rendimiento para perfiles agresivos',
    agent: 'Nova',
    profile: 'Agresivo',
    targetReturn: '10%+',
    maxDrawdown: '20%',
    icon: Zap,
  },
];

export default function Investment() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Inversión</h1>
        <p className="text-gray-400">Gestiona tus cuentas de inversión con agentes IA</p>
      </div>

      {/* My Accounts */}
      <div className="card">
        <h2 className="text-lg font-semibold text-white mb-4">Mis Cuentas</h2>
        <div className="text-center py-8 text-gray-400">
          <p>No tienes cuentas de inversión activas.</p>
          <button className="btn btn-primary mt-4">Abrir Nueva Cuenta</button>
        </div>
      </div>

      {/* Available Products */}
      <div>
        <h2 className="text-lg font-semibold text-white mb-4">Productos Disponibles</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {products.map((product) => (
            <div key={product.id} className="card hover:border-primary-500 transition-colors">
              <div className="w-12 h-12 rounded-lg bg-primary-900/30 flex items-center justify-center mb-4">
                <product.icon className="w-6 h-6 text-primary-400" />
              </div>

              <h3 className="text-lg font-semibold text-white">{product.name}</h3>
              <p className="text-sm text-gray-400 mt-2">{product.description}</p>

              <div className="mt-4 space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-gray-400">Agente:</span>
                  <span className="text-white font-medium">{product.agent}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Perfil:</span>
                  <span className="text-white">{product.profile}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Target mensual:</span>
                  <span className="text-green-400">{product.targetReturn}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Max Drawdown:</span>
                  <span className="text-red-400">{product.maxDrawdown}</span>
                </div>
              </div>

              <button className="btn btn-primary w-full mt-4">Abrir Cuenta</button>
            </div>
          ))}
        </div>
      </div>

      {/* Risk Warning */}
      <div className="card bg-yellow-900/20 border-yellow-800">
        <p className="text-sm text-yellow-400">
          <strong>Aviso de Riesgo:</strong> El trading e inversión conlleva riesgos significativos.
          Los rendimientos objetivo no están garantizados. Puede perder parte o la totalidad de su inversión.
        </p>
      </div>
    </div>
  );
}