import React from 'react';
import { MoreVertical } from 'lucide-react';

const tableData = [
    { month: 'Jan', income: '0.00 AED', expense: '0.00 AED', profit: '0.00 AED', status: 'Profit' },
    { month: 'Feb', income: '0.00 AED', expense: '0.00 AED', profit: '0.00 AED', status: 'Profit' },
    { month: 'Mar', income: '0.00 AED', expense: '0.00 AED', profit: '0.00 AED', status: 'Profit' },
    { month: 'Apr', income: '0.00 AED', expense: '0.00 AED', profit: '0.00 AED', status: 'Profit' },
];

export default function ProfitTable() {
    return (
        <div className="bg-white rounded-[2rem] p-8 border border-gray-100 shadow-sm">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-xl font-bold text-gray-900">Profit & Loss Trend (Monthly)</h3>
                <button className="text-gray-400 hover:text-gray-900 transition-colors">
                    <MoreVertical size={20} />
                </button>
            </div>

            <div className="overflow-x-auto">
                <table className="w-full">
                    <thead>
                        <tr className="text-left border-b border-gray-50">
                            <th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Month</th>
                            <th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Income</th>
                            <th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Expense</th>
                            <th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Profit</th>
                            <th className="pb-4 text-[10px] uppercase font-bold text-gray-400 tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-50">
                        {tableData.map((row, index) => (
                            <tr key={index} className="group hover:bg-gray-50/50 transition-all">
                                <td className="py-4 text-sm font-medium text-gray-500">{row.month}</td>
                                <td className="py-4 text-sm font-bold text-emerald-500">{row.income}</td>
                                <td className="py-4 text-sm font-bold text-rose-500">{row.expense}</td>
                                <td className="py-4 text-sm font-bold text-blue-500">{row.profit}</td>
                                <td className="py-4">
                                    <span className="px-3 py-1 bg-emerald-50 text-emerald-600 text-[10px] font-bold uppercase tracking-wider rounded-lg border border-emerald-100">
                                        {row.status}
                                    </span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}