import { TrendingUp, Info, AlertTriangle, RefreshCw } from 'lucide-react';

export default function YieldDashboard() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-3">
            <TrendingUp className="text-synor-400" />
            Yield Aggregator
          </h1>
          <p className="text-gray-400 mt-1">Auto-compound and find the best APY</p>
        </div>
        <button className="p-2 bg-gray-800 rounded-lg">
          <RefreshCw size={18} />
        </button>
      </div>

      <div className="bg-yellow-500/20 border border-yellow-500/30 rounded-xl p-4 flex items-start gap-3">
        <AlertTriangle className="text-yellow-400 mt-0.5" />
        <div>
          <p className="font-medium text-yellow-200">Coming Soon</p>
          <p className="text-sm text-yellow-200/70">
            The yield aggregator automatically finds the best yields across DeFi protocols
            and compounds your earnings.
          </p>
        </div>
      </div>

      <div className="grid grid-cols-3 gap-4">
        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800 text-center">
          <p className="text-sm text-gray-400 mb-1">Total Deposited</p>
          <p className="text-2xl font-bold">0 SYN</p>
        </div>
        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800 text-center">
          <p className="text-sm text-gray-400 mb-1">Total Earned</p>
          <p className="text-2xl font-bold text-green-400">0 SYN</p>
        </div>
        <div className="bg-gray-900 rounded-xl p-4 border border-gray-800 text-center">
          <p className="text-sm text-gray-400 mb-1">Best APY</p>
          <p className="text-2xl font-bold text-synor-400">--%</p>
        </div>
      </div>

      <div className="bg-gray-900 rounded-xl p-4 border border-gray-800">
        <h3 className="font-medium mb-4">Available Strategies</h3>
        <p className="text-sm text-gray-500 text-center py-4">
          No yield strategies available yet
        </p>
      </div>

      <div className="bg-gray-900/50 rounded-lg p-4 border border-gray-800 flex items-start gap-3">
        <Info className="text-gray-500 mt-0.5" size={18} />
        <p className="text-sm text-gray-400">
          Yield aggregation optimizes gas costs and maximizes returns by automatically
          moving funds to the highest-yielding opportunities.
        </p>
      </div>
    </div>
  );
}