import { formatMoney } from "@/lib/format";

// profit_share payload from provider/home.
export interface ProfitShare {
  percent: number;
  subtitle: string;
  expected_profit_month: number;
  expected_profit_month_label: string;
}

export default function ProfitBanner({
  profitShare,
  currency,
}: Readonly<{
  profitShare: ProfitShare;
  currency: string;
}>) {
  return (
    <div
      className="rounded-2xl p-6 relative overflow-hidden h-full flex flex-col justify-between"
      style={{ background: "linear-gradient(135deg, #2D2A00 0%, #1E2128 100%)" }}
    >
      <div className="absolute inset-0 opacity-10 pointer-events-none">
        <div className="absolute top-0 right-0 w-32 h-32 bg-[#FCD704] rounded-full translate-x-1/2 -translate-y-1/2" />
        <div className="absolute bottom-0 left-0 w-24 h-24 bg-[#FCD704] rounded-full -translate-x-1/2 translate-y-1/2" />
      </div>
      <div className="relative flex items-start justify-between">
        <button className="w-7 h-7 flex items-center justify-center cursor-pointer">
          <i className="ri-information-line text-gray-400 text-lg" />
        </button>
        <p className="text-white font-bold text-sm">نسبة أرباحك من النظام</p>
      </div>
      <div className="relative text-center my-4">
        <p
          className="text-[#FCD704] font-black"
          style={{ fontSize: "64px", lineHeight: 1 }}
        >
          {profitShare.percent}%
        </p>
        <p className="text-gray-400 text-xs mt-2">{profitShare.subtitle}</p>
      </div>
      <div className="relative bg-[#FCD704]/10 rounded-xl p-3 text-center">
        <p className="text-[#FCD704] text-xs font-semibold">
          {profitShare.expected_profit_month_label}
        </p>
        <p className="text-white font-bold text-lg mt-0.5">
          {formatMoney(profitShare.expected_profit_month, currency)}
        </p>
      </div>
    </div>
  );
}