import { IconWithTooltip } from "@src/components";

export const AprCard = () => {
  return (
    <div className="p-4 flex flex-col gap-2 rounded-xl bg-transparent border border-text_primary/10">
      <div className="flex gap-1 items-center">
        <p className="text-success_color text-sm font-bold">Total APR = 2.7%</p>
        <IconWithTooltip tooltipText="Text" id="lido-apr-tooltip" />
      </div>
      <p className="text-sm text-text_primary/60 font-medium">
        Staking stETH via Lido in DeFi means you earn rewards by&nbsp;helping
        secure the Ethereum network, while still being able&nbsp;to&nbsp;use
        your tokens in other DeFi activities.{" "}
        <a href="https://swapper.finance" className="text-theme_color">
          Read&nbsp;more&nbsp;{`>`}
        </a>
      </p>
    </div>
  );
};