import { psa } from "@db/schema/Psa";
import Image from "next/image";
import Link from "next/link";

export default async function ProductTable(props: any) {

  return (
    <table className={"table-auto border-separate bg-slate-500 border-spacing-2 shadow-inner border border-slate-500"}>
      <thead>
        <tr className='border border-slate-700'>
          <th className='bg-slate-700 text-white pl-1 w-40 text-left'>Component</th>
          <th className='bg-slate-700 text-white w-40 pl-1 text-left'>Manufacturer</th>
          <th className='bg-slate-700 text-white w-40 pl-1 text-left'>Model #</th>
          <th className='bg-slate-700 text-white w-40 pl-1 text-left'>Retail Price</th>
          <th className='bg-slate-700 text-white w-20 pl-1 text-left'>Sale Price</th>
          <th className='bg-slate-700 text-white w-20 pl-1 text-left'></th>
        </tr>
      </thead>

      <tbody>
        {props.data.map((item: any) => (
          <tr className='text-white' key={item.uuid} >
            <td className='text-white text-left'>
              <a href={item.buyLink} target="_new">
                <Image src={item.imageUrl} alt="A image of the product" width="50" height="50" title='Click to see details' className='hover:size-60'></Image>
              </a>
            </td>
            <td className='text-white text-left'>{item.brandName}</td>
            <td className='text-white text-left'>{item.modelnumber}</td>
            <td className='text-white text-left'>{item.retailPrice}</td>
            <td className='text-white text-left flex items-center gap-2'>
              ${Number(item.salePrice).toFixed(2)}</td>
            <td className='text-center'>

              <a href={item.buyLink} target="_new">
                <button className='bg-slate-700 hover:bg-slate-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded align-middle'>Add</button>
              </a>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}