"use client"

import ImageWithFallback from '@/components/UiComponents/ImageWithFallback';
import React from 'react'
import AppTable from '@/components/UiComponents/table/AppTable';
import { useTranslations } from 'next-intl';

const ProductsTable = ({items,order_number}:{items:any,order_number:string}) => {
  const t = useTranslations();
  const columns = [
    {
      title: t("tables.product"),
      dataIndex: "product",
      key: "product",
      render: (_: any, record: any) => {
        const nameParts = record.name?.split("-") || [];
        const name = nameParts[0] || "";
        const features = [nameParts[1], nameParts[2]].filter(Boolean).join(", ");

        return (
          <div className="flex items-center gap-2">
            <ImageWithFallback
              src={record.main}
              width={80}
              height={80}
              alt={`product-name`}
              className="size-14 object-contain bg-greynormal"
            />
            <div className="text-xs">
              <h5 className="mb-2">{name}</h5>
              <p className="text-gray-500">{features}</p>
            </div>
          </div>
        );
      }
    },
    {
      title: t("tables.orderNumber"),
      dataIndex: "order_number",
      key: "order_number",
      render:(_:string) => <span>{order_number}</span>
    },
    {
      title: t("tables.quantity"),
      dataIndex: "quantity",
      key: "quantity",
    },
    {
      title: t("tables.price"),
      dataIndex: "price",
      key: "price",
      render:(price:string) => <span>{price} {t("Text.IQ")}</span>
    },
    {
      title: t("tables.total"),
      dataIndex: "total",
      key: "total",
      render:(total:string) => <span>{total} {t("Text.IQ")}</span>
    },
  ];

      
  return (
    <AppTable
        columns={columns} 
        dataSource={items} 
        pagination={false}
        tableTitle={t("Text.products")}
        showSelection={false}  
    />
  )
}

export default ProductsTable