import { RecentSale } from '../../../types/services/analytic'
import { formatCurrency, formatDate } from '../../../utils/transform'

const OrdersReport = ({ orderData, title }: { orderData: RecentSale[]; title: string }) => {
  return (
    <div className='bg-white rounded-lg shadow-md'>
      <div className='p-6'>
        <div className='flex items-center mb-6'>
          <i className='tabler-calendar-stats text-[24px] text-purple-500 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'>Date</th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Sales
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Orders
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Items
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>Tax</th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Discount
                </th>
                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
                  Net Sales
                </th>
              </tr>
            </thead>
            <tbody className='bg-white divide-y divide-gray-200'>
              {orderData && orderData.map((sale, index) => (
                <tr key={index} className='hover:bg-gray-50'>
                  <td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
                    {formatDate(sale.date)}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900'>
                    {formatCurrency(sale.sales)}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{sale.orders}</td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{sale.items}</td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                    {formatCurrency(sale.tax)}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
                    {formatCurrency(sale.discount)}
                  </td>
                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600'>
                    {formatCurrency(sale.net_sales)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

export default OrdersReport
