"use client";

import EarnOpportunityCard from "./EarnOpportunityCard";
import ActivityHistory from "./ActivityHistory";
import TopPerformers from "./TopPerformers";
import ReferralCodeCard from "./ReferralCodeCard";
import BindInviteCard from "./BindInviteCard";
import TeamTVLCard from "./TeamTVLCard";
import DepositCard from "./DepositCard";

export default function PointsCards() {
  return (
    <div className="flex flex-col gap-6">
      {/* First Row - Cards 1, 2, 3 */}
      <div className="flex gap-6">
        <ReferralCodeCard
          code="PR0T0-8821"
          onCopy={() => console.log("Copy clicked")}
          onShare={() => console.log("Share clicked")}
        />
        <BindInviteCard
          placeholder="ENTER CODE"
          onApply={(code) => console.log("Apply clicked", code)}
        />
        <TeamTVLCard
          currentTVL="$8.5M"
          totalTVL="$10M"
          progressPercent={85}
          members={12}
          roles={[
            { icon: "/icon-whale.svg", label: "Whales", current: 3, total: 3 },
            { icon: "/icon-trader.svg", label: "Traders", current: 0, total: 3 },
            { icon: "/icon-user.svg", label: "Users", current: 5, total: 3 },
          ]}
        />
      </div>

      {/* Second Row - Card 4 */}
      <DepositCard
        title="Deposit USDC to ALP"
        subtitle="Native Staking"
        badge="UP TO 3X"
        lockPeriod="30 DAYS"
        progressPercent={65}
        pointsBoost="+10% POINTS"
        onDeposit={() => console.log("Deposit clicked")}
      />

      {/* Third Row - Earn Opportunities */}
      <div className="flex gap-6">
        <EarnOpportunityCard
          pointsLabel="7X Points"
          title="Pendle YT"
          subtitle="Yield Trading optimization"
          metricLabel="EST. APY"
          metricValue="50%-300%"
          buttonText="ZAP IN"
          onButtonClick={() => console.log("ZAP IN clicked")}
        />
        <EarnOpportunityCard
          pointsLabel="4X Points"
          title="Curve LP"
          subtitle="Liquidity Pool provision"
          metricLabel="CURRENT APY"
          metricValue="15%-35%"
          buttonText="Add Liquidity"
          onButtonClick={() => console.log("Add Liquidity clicked")}
        />
        <EarnOpportunityCard
          pointsLabel="2X-8X Points"
          title="Morpho"
          subtitle="Lending Loop strategy"
          metricLabel="MAX LTV"
          metricValue="85%"
          buttonText="Start LOOP"
          onButtonClick={() => console.log("Start LOOP clicked")}
        />
      </div>

      {/* Fourth Row - Activity History and Top Performers */}
      <div className="flex gap-6">
        <div className="flex-[2]">
          <ActivityHistory />
        </div>
        <div className="flex-1">
          <TopPerformers />
        </div>
      </div>
    </div>
  );
}