"use client";

import type { Coupon } from "@/types/domain";
import { useLocale } from "@/providers/locale-provider";
import { pickLocalizedText } from "@/lib/utils/i18n";

export function CouponTable({ coupons }: { coupons: Coupon[] }) {
  const { locale } = useLocale();
  const isArabic = locale === "ar";

  return (
    <div className="surface-card overflow-hidden p-0">
      <table className="table-clean">
        <thead>
          <tr>
            <th>{isArabic ? "المتجر الإلكتروني" : "Online Store"}</th>
            <th>{isArabic ? "كود الخصم" : "Discount Code"}</th>
            <th>{isArabic ? "الوصف" : "Description"}</th>
          </tr>
        </thead>
        <tbody>
          {coupons.slice(0, 10).map((coupon, index) => (
            <tr key={`${coupon.id}-${coupon.store_id}-${coupon.code || "deal"}-${index}`}>
              <td>{pickLocalizedText(coupon.store, "name_ar", "name_en", locale, isArabic ? "متجر" : "Store")}</td>
              <td>{coupon.code || "DEAL"}</td>
              <td>{pickLocalizedText(coupon, "description_ar", "description_en", locale, isArabic ? "عرض خصم مميز." : "Special discount offer.")}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}