import { TrendingUp, TrendingDown, DollarSign, BarChart3 } from 'lucide-react';

const stats = [
  { name: 'Balance Total', value: '$12,345.67', change: '+5.4%', trend: 'up', icon: DollarSign },
  { name: 'Rendimiento Mensual', value: '+$678.90', change: '+4.2%', trend: 'up', icon: TrendingUp },
  { name: 'Operaciones Activas', value: '3', change: '2 long, 1 short', trend: 'neutral', icon: BarChart3 },
  { name: 'Win Rate', value: '68%', change: '+2.1%', trend: 'up', icon: TrendingUp },
];

export default function Dashboard() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white">Dashboard</h1>
        <p className="text-gray-400">Resumen de tu portafolio e inversiones</p>
      </div>

      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat) => (
          <div key={stat.name} className="card">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-400">{stat.name}</p>
                <p className="text-2xl font-bold text-white mt-1">{stat.value}</p>
                <p className={`text-sm mt-1 ${
                  stat.trend === 'up' ? 'text-green-400' :
                  stat.trend === 'down' ? 'text-red-400' : 'text-gray-400'
                }`}>
                  {stat.change}
                </p>
              </div>
              <div className={`p-3 rounded-lg ${
                stat.trend === 'up' ? 'bg-green-900/30' :
                stat.trend === 'down' ? 'bg-red-900/30' : 'bg-gray-700'
              }`}>
                <stat.icon className={`w-6 h-6 ${
                  stat.trend === 'up' ? 'text-green-400' :
                  stat.trend === 'down' ? 'text-red-400' : 'text-gray-400'
                }`} />
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Chart placeholder */}
      <div className="card">
        <h2 className="text-lg font-semibold text-white mb-4">Evolución del Portafolio</h2>
        <div className="h-64 flex items-center justify-center bg-gray-900 rounded-lg">
          <p className="text-gray-500">Gráfico de rendimiento (por implementar)</p>
        </div>
      </div>

      {/* Recent Activity */}
      <div className="card">
        <h2 className="text-lg font-semibold text-white mb-4">Actividad Reciente</h2>
        <div className="space-y-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center justify-between py-3 border-b border-gray-700 last:border-0">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-lg bg-green-900/30 flex items-center justify-center">
                  <TrendingUp className="w-5 h-5 text-green-400" />
                </div>
                <div>
                  <p className="text-white">Señal ejecutada: XAUUSD Long</p>
                  <p className="text-sm text-gray-400">Hace 2 horas</p>
                </div>
              </div>
              <span className="text-green-400">+$45.30</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
