assetx/components/points/DepositCard.tsx

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

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) {
  return (
    <div className="w-full bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-8 flex flex-col gap-6">
      {/* Top Section */}
      <div className="flex items-center justify-between">
        {/* Left - Logo and Title */}
        <div className="flex items-center gap-6">
          {/* Logo */}
          {logo ? (
            <Image src={logo} alt={title} width={40} height={40} className="rounded-full" />
          ) : (
            <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]">
                LOGO
              </span>
            </div>
          )}

          {/* Title and Subtitle */}
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-3">
              <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"
                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>

        {/* Right - Lock Period and Button */}
        <div className="flex items-center 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]">
              LOCK PERIOD
            </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"
            style={{ width: '163px' }}
          >
            Start LOOP
            <Image src="/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>
  );
}