import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { Target, Info } from 'lucide-react';

const RiskAnalysis: React.FC = () => {
    return (
        <GlassCard className="p-6 h-full flex flex-col justify-between">
            <div>
                <div className="flex items-center gap-2 mb-4">
                    <Target className="w-5 h-5 text-purple-600" />
                    <h3 className="text-lg font-semibold text-slate-800">Risk Analysis</h3>
                </div>
                <p className="text-slate-600 text-sm leading-relaxed mb-6">
                    Your portfolio currently aligns with a balanced growth strategy. Consider increasing diversification in global markets to hedge against local volatility.
                </p>
            </div>

            <div className="space-y-4">
                <div className="flex justify-between items-center p-3 bg-slate-50 rounded-xl border border-slate-100">
                    <span className="text-sm font-medium text-slate-600">Current Score</span>
                    <span className="text-2xl font-bold text-slate-900">7.2<span className="text-sm text-slate-400 font-normal">/10</span></span>
                </div>
                <div className="flex justify-center">
                    <span className="px-4 py-1.5 bg-yellow-100 text-yellow-700 rounded-full text-sm font-bold border border-yellow-200 shadow-sm">
                        Moderate Risk
                    </span>
                </div>
            </div>
        </GlassCard>
    );
};

export default RiskAnalysis;