import React from "react";
import Card from "../ui/Card";
import { formatDate } from "../../utils/billing";

export default function CurrentSubscriptionCard({ subscription, subLoading }) {
  const isSubActive = (subscription?.status || "").toLowerCase() === "active";

  return (
    <Card className="!rounded-xl !shadow !border !border-[#43BEFF] dark:!border-white/10 !bg-white dark:!bg-[#16325b]" padding="lg">
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
        <div>
          <div className="text-sm font-semibold text-black dark:text-white">پلن فعال فعلی شما</div>

          {subLoading ? (
            <div className="text-sm text-black/60 dark:text-white/70 mt-1">در حال دریافت اطلاعات...</div>
          ) : subscription?.plan ? (
            <div className="mt-1 text-sm text-black/70 dark:text-white/80">
              <span className="font-bold text-black dark:text-white">{subscription.plan.name}</span>{" "}
              <span className="opacity-70">(وضعیت: {isSubActive ? "فعال" : subscription.status})</span>
            </div>
          ) : (
            <div className="text-sm text-black/60 dark:text-white/70 mt-1">شما هنوز اشتراک فعالی ندارید.</div>
          )}
        </div>

        {subscription?.plan ? (
          <div className="flex flex-wrap gap-2 text-xs">
            <span className="px-3 py-1 rounded-full bg-[#A1E3F980] dark:bg-[#A1E3F919] text-black/70 dark:text-white/80">
              شروع: {formatDate(subscription.started_at)}
            </span>
            <span className="px-3 py-1 rounded-full bg-[#A1E3F980] dark:bg-[#A1E3F919] text-black/70 dark:text-white/80">
              تمدید خودکار: {subscription.auto_renew ? "روشن" : "خاموش"}
            </span>
          </div>
        ) : null}
      </div>
    </Card>
  );
}
