import { Link } from '@inertiajs/react'
import { useState, useEffect } from 'react'
import { router } from '@inertiajs/react'

export default function ProductTable({ items, title, links}) {
    console.log(items);
    const items_list = items.map(items => {
        return (
            <tr key={items.id} className="border-y text-right font-normal">
                <td className="py-2">{ items.id }</td>
                <td className="py-2">{ items.images[0] ? <img className="z-0 w-16 h-16 rounded-lg shadow-inner p-1" src={ items.images[0].thumbnail } alt={ items.images[0].alt } /> : null }</td>
                <td className="py-2 text-lg">{ items.title }</td>
                <td className="py-2">{ items.price }</td>
                <td className="py-2">{ items.inventory }</td>
            </tr>
        )}
    );


    return (
        <div className="h-full">
            <div className="flex flex-col bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition overflow-auto max-h-full">
                <div className="w-full px-3">
                    <table className="table-auto border-collapse w-full text-right">
                        <th className="text-sm font-normal w-12">
                            <span>
                                آیدی
                            </span>
                        </th>
                        <th className="text-sm font-normal w-20">
                            <span>
                                عکس
                            </span>
                        </th>
                        <th className="text-sm font-normal">
                            <span>
                                عنوان
                            </span>
                        </th>
                        <th className="text-sm font-normal">
                            <span>
                                قیمت
                            </span>
                        </th>
                        <th className="text-sm font-normal">
                            <span>
                                موجودی
                            </span>
                        </th>
 
                        {items_list}
                    </table>
                </div>
            </div>
        </div>
    );
}