import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, Cell } from 'recharts';

export default function AssetDistribution({ data, height = 350 }) {
    const defaultData = [
        { category: 'Cash & Equivalents', current: 250000, target: 300000 },
        { category: 'Investments', current: 480000, target: 500000 },
        { category: 'Real Estate', current: 1200000, target: 1500000 },
        { category: 'Equipment', current: 320000, target: 350000 },
        { category: 'Inventory', current: 180000, target: 200000 },
        { category: 'Receivables', current: 95000, target: 100000 },
    ];

    const chartData = data || defaultData;

    const CustomTooltip = ({ active, payload, label }) => {
        if (active && payload && payload.length) {
            return (
                <div className="bg-white p-4 rounded-lg shadow-xl border border-gray-200">
                    <p className="font-semibold text-gray-900 mb-2">{label}</p>
                    <p className="text-sm text-primary-600">
                        Current: ${payload[0].value.toLocaleString()}
                    </p>
                    <p className="text-sm text-gray-400">
                        Target: ${payload[1].value.toLocaleString()}
                    </p>
                    <p className="text-xs text-gray-500 mt-1">
                        {((payload[0].value / payload[1].value) * 100).toFixed(1)}% of target
                    </p>
                </div>
            );
        }
        return null;
    };

    return (
        <ResponsiveContainer width="100%" height={height}>
            <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                <XAxis 
                    dataKey="category" 
                    stroke="#6b7280" 
                    style={{ fontSize: '12px' }}
                    angle={-15}
                    textAnchor="end"
                    height={80}
                />
                <YAxis stroke="#6b7280" style={{ fontSize: '12px' }} />
                <Tooltip content={<CustomTooltip />} />
                <Legend 
                    wrapperStyle={{ fontSize: '14px', paddingTop: '10px' }}
                    iconType="circle"
                />
                <Bar dataKey="current" fill="#6D4C41" name="Current Value" radius={[8, 8, 0, 0]} />
                <Bar dataKey="target" fill="#e5e7eb" name="Target Value" radius={[8, 8, 0, 0]} />
            </BarChart>
        </ResponsiveContainer>
    );
}
