import { ProductData } from '../../../types/services/analytic'
import { formatCurrency } from '../../../utils/transform'

const ProductSales = ({ productData, title }: { productData: ProductData[], title: string }) => {
  return (
    <div className='lg:col-span-2 bg-white rounded-lg shadow-md'>
      <div className='p-6'>
        <div className='flex items-center mb-6'>
          <i className='tabler-coffee text-[24px] text-amber-600 mr-2'></i>
          <h2 className='text-xl font-semibold text-gray-900'>{title}</h2>
        </div>
        <div className='overflow-x-auto'>
          <table className='min-w-full'>
            <thead>
              <tr className='bg-gray-50'>
                <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Product
                </th>
                <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Category
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Qty Sold
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Revenue
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Avg Price
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Orders
                </th>
              </tr>
            </thead>
            <tbody className='bg-white divide-y divide-gray-200'>
              {productData && productData.map((product, index) => (
                <tr key={product.product_id} className='hover:bg-gray-50'>
                  <td className='px-4 py-4 whitespace-nowrap'>
                    <div className='flex items-center'>
                      <span
                        className={`w-2 h-2 rounded-full mr-3 ${
                          index === 0
                            ? 'bg-green-500'
                            : index === 1
                              ? 'bg-blue-500'
                              : index === 2
                                ? 'bg-purple-500'
                                : 'bg-gray-400'
                        }`}
                      ></span>
                      <span className='text-sm font-medium text-gray-900'>{product.product_name}</span>
                    </div>
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap'>
                    <span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
                      {product.category_name}
                    </span>
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900'>
                    {product.quantity_sold}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600'>
                    {formatCurrency(product.revenue)}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                    {formatCurrency(product.average_price)}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                    {product.order_count}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

export default ProductSales
