import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import { formatCurrency } from '@/lib/utils';

export default function PriceTracker({ items }: any) {
    return (
        <AuthenticatedLayout header="Price Tracker">
            <Head title="Price Tracker" />
            <div className="bg-white rounded-lg border border-border shadow-sm overflow-hidden">
                <table className="w-full text-sm"><thead className="bg-muted/50 border-b"><tr><th className="text-left px-4 py-3 font-medium">Item Description</th><th className="text-right px-4 py-3 font-medium">Times Ordered</th><th className="text-right px-4 py-3 font-medium">Min Price</th><th className="text-right px-4 py-3 font-medium">Avg Price</th><th className="text-right px-4 py-3 font-medium">Max Price</th></tr></thead>
                <tbody className="divide-y">{items.map((i:any,idx:number)=><tr key={idx} className="hover:bg-muted/30"><td className="px-4 py-3">{i.description}</td><td className="px-4 py-3 text-right">{i.count}</td><td className="px-4 py-3 text-right text-green-700">{formatCurrency(i.min_price)}</td><td className="px-4 py-3 text-right font-medium">{formatCurrency(i.avg_price)}</td><td className="px-4 py-3 text-right text-red-700">{formatCurrency(i.max_price)}</td></tr>)}</tbody></table>
                {items.length===0&&<p className="text-center py-12 text-muted-foreground">No price data yet.</p>}
            </div>
        </AuthenticatedLayout>
    );
}
