import React from 'react';
import { GlassCard } from '@/components/ui/GlassCard';
import { formatAmount } from '@/lib/utils';
import { DirhamIcon } from '@/components/ui/custom-icons';

interface AssetAllocationProps {
    holdings: Array<{
        name: string;
        symbol: string;
        currentValue: number;
        sector: string; // Keep for color logic if needed
        shares?: number;
        units?: number;
    }>;
    totalValue: number;
}

const AssetAllocation: React.FC<AssetAllocationProps> = ({ holdings, totalValue }) => {
    // Sort holdings by value descending
    const sortedHoldings = [...holdings].sort((a, b) => b.currentValue - a.currentValue);

    // Helper to get color based on index
    const getGradient = (index: number) => {
        const gradients = [
            'from-blue-500 to-blue-600',
            'from-green-500 to-green-600',
            'from-purple-500 to-purple-600',
            'from-orange-500 to-orange-600',
            'from-pink-500 to-pink-600',
            'from-teal-500 to-teal-600',
        ];
        return gradients[index % gradients.length];
    };

    return (
        <GlassCard className="p-6 h-full">
            <h3 className="text-lg font-semibold text-slate-800 mb-6">Asset Allocation</h3>
            <div className="space-y-6">
                {sortedHoldings.map((stock, index) => {
                    const percentage = ((stock.currentValue / totalValue) * 100).toFixed(1);
                    return (
                        <div key={index} className="space-y-2">
                            <div className="flex justify-between items-center text-sm">
                                <div className="flex items-center gap-2">
                                    <span className="font-bold text-slate-700 w-12">{stock.symbol}</span>
                                    <span className="text-slate-500 truncate max-w-[120px]">{stock.name}</span>
                                </div>
                                <div className="text-right">
                                    <span className="font-bold text-slate-900">{percentage}%</span>
                                </div>
                            </div>
                            <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
                                <div
                                    className={`h-full bg-gradient-to-r ${getGradient(index)} transition-all duration-1000`}
                                    style={{ width: `${percentage}%` }}
                                ></div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </GlassCard>
    );
};

export default AssetAllocation;