assetx/webapp/components/points/DepositCard.tsx

"use client";

import Image from "next/image";
import { Button } from "@heroui/react";
import { useApp } from "@/contexts/AppContext";

interface DepositCardProps {
  logo?: string;
  title: string;
  subtitle: string;
  badge: string;
  lockPeriod: string;
  progressPercent: number;
  pointsBoost: string;
  onDeposit?: () => void;
}

export default function DepositCard({
  logo,
  title,
  subtitle,
  badge,
  lockPeriod,
  progressPercent,
  pointsBoost,
  onDeposit,
}: DepositCardProps) {
  const { t } = useApp();
  return (
    <div className="w-full bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-4 md:p-8 flex flex-col gap-6">
      {/* Top Section */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        {/* Logo and Title */}
        <div className="flex items-center gap-3 md:gap-6">
          {logo ? (
            <Image src={logo} alt={title} width={40} height={40} className="rounded-full flex-shrink-0" />
          ) : (
            <div
              className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
              style={{ background: "linear-gradient(135deg, rgba(0, 187, 167, 1) 0%, rgba(0, 122, 85, 1) 100%)" }}
            >
              <span className="text-[10px] font-bold text-white leading-[125%] tracking-[-0.11px]">
                {t("points.logo")}
              </span>
            </div>
          )}

          <div className="flex flex-col gap-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="text-heading-h4 font-bold text-text-primary dark:text-white leading-[140%]">
                {title}
              </h3>
              <div
                className="rounded-full px-3 py-1 flex items-center justify-center flex-shrink-0"
                style={{ background: "#ff6900", boxShadow: "0px 4px 6px -4px rgba(255, 105, 0, 0.2), 0px 10px 15px -3px rgba(255, 105, 0, 0.2)" }}
              >
                <span className="text-[10px] font-bold text-white leading-[150%] tracking-[0.01em]">
                  {badge}
                </span>
              </div>
            </div>
            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[133%]">
              {subtitle}
            </span>
          </div>
        </div>

        {/* Lock Period and Button */}
        <div className="flex items-center justify-between md:justify-end gap-4 md:gap-12">
          <div className="flex flex-col gap-1">
            <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
              {t("points.lockPeriod")}
            </span>
            <span className="text-body-default font-bold text-text-primary dark:text-white leading-[150%]">
              {lockPeriod}
            </span>
          </div>

          <Button
            onClick={onDeposit}
            className="bg-text-primary dark:bg-white rounded-xl h-11 px-4 text-body-small font-bold text-white dark:text-gray-900 flex items-center gap-1 w-[163px] flex-shrink-0"
          >
            {t("points.startLoop")}
            <Image src="/icons/actions/icon-arrow-right.svg" alt="" width={16} height={16} />
          </Button>
        </div>
      </div>

      {/* Bottom Section - Progress Bar */}
      <div className="flex items-center justify-between border-t border-[#f1f5f9] dark:border-gray-600 pt-6">
        {/* Progress Bar */}
        <div className="relative flex-1 h-2 bg-[#f1f5f9] dark:bg-gray-700 rounded-full overflow-hidden max-w-[447px]">
          <div
            className="absolute left-0 top-0 h-full rounded-full"
            style={{
              width: `${progressPercent}%`,
              background: "#00bc7d",
              boxShadow: "0px 0px 15px 0px rgba(16, 185, 129, 0.4)"
            }}
          />
        </div>

        {/* Points Badge */}
        <span
          className="text-[10px] font-black leading-[150%] tracking-[1.12px] ml-4"
          style={{ color: "#00bc7d" }}
        >
          {pointsBoost}
        </span>
      </div>
    </div>
  );
}