export default async function ProductTable(props:any) {

  return (
        <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
          <thead>
            <tr>
              <th className='bg-slate-700 text-white pl-2 w-40'>Component</th>
              <th className='bg-slate-700 text-white w-40'>Manufacturer</th>
              <th className='bg-slate-700 text-white w-40'>Model #</th>
              <th className='bg-slate-700 text-white w-40'>Price</th>
            </tr>
          </thead>
          <tbody>
            {props.data.map((item:any) => (
              <tr key={item.upc}>
                <td className='text-slate-800'>{item.category}</td>
                <td className='text-slate-800'>{item.brandName}</td>
                <td className='text-slate-800'>{item.modelnumber}</td>
                <td className="text-slate-800 flex items-center gap-2">
                  ${Number(item.salePrice).toFixed(2)}
                  <button >Buy</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
  );
}