TorbatYar/frontend/modules/commercial/components/BundleCard.tsx

"use client";

import type { CommercialBundle } from "../types";
import { Badge, Button } from "@/components/ui";

export function BundleCard({
  bundle,
  onSelect,
  selected,
  recommendationScore,
}: {
  bundle: CommercialBundle;
  onSelect?: () => void;
  selected?: boolean;
  recommendationScore?: number;
}) {
  const features = bundle.feature_refs?.length
    ? bundle.feature_refs
    : bundle.capability_codes || [];

  return (
    <div
      className={`rounded-2xl border p-5 ${
        selected
          ? "border-primary bg-[var(--color-primary-soft)] shadow-md"
          : "border-gray-200 bg-white shadow-sm"
      }`}
    >
      <div className="flex flex-wrap items-start justify-between gap-2">
        <div>
          <h3 className="text-lg font-bold text-secondary">{bundle.display_name}</h3>
          {bundle.description ? (
            <p className="mt-1 text-sm text-gray-600">{bundle.description}</p>
          ) : null}
        </div>
        <div className="flex flex-wrap gap-1">
          {bundle.recommendation_badge ? (
            <Badge variant="primary">{bundle.recommendation_badge}</Badge>
          ) : null}
          {bundle.trial_eligible ? <Badge variant="default">Trial</Badge> : null}
          {typeof recommendationScore === "number" ? (
            <Badge variant="default">امتیاز {recommendationScore}</Badge>
          ) : null}
        </div>
      </div>
      <p className="mt-2 font-mono text-[10px] text-gray-400" dir="ltr">
        {bundle.bundle_code}
      </p>
      {bundle.product_codes?.length ? (
        <p className="mt-3 text-xs text-gray-500">
          محصولات: {bundle.product_codes.join("، ")}
        </p>
      ) : null}
      {features.length ? (
        <p className="mt-1 text-xs text-gray-500">
          ویژگی‌ها: {features.slice(0, 12).join("، ")}
          {features.length > 12 ? "…" : ""}
        </p>
      ) : null}
      {bundle.pricing_refs?.length ? (
        <p className="mt-1 text-xs text-gray-500">قیمت‌گذاری: {bundle.pricing_refs.join("، ")}</p>
      ) : null}
      {bundle.discount_refs?.length ? (
        <p className="mt-1 text-xs text-gray-500">تخفیف: {bundle.discount_refs.join("، ")}</p>
      ) : null}
      {bundle.upgrade_path_code ? (
        <p className="mt-1 text-xs text-primary">مسیر ارتقا: {bundle.upgrade_path_code}</p>
      ) : null}
      {onSelect ? (
        <Button className="mt-4 w-full" size="sm" variant={selected ? "primary" : "outline"} onClick={onSelect}>
          {selected ? "انتخاب‌شده" : "انتخاب باندل"}
        </Button>
      ) : null}
    </div>
  );
}