import { Button, ButtonVariants } from "@src/components";
import { CardInfo, StatsHeader } from "../StatsHeader";
import { useNavigate } from "react-router-dom";
import { RoutePath } from "@src/interfaces";
import { TradesPointsAnimation } from "./TradesPointsAnimation";

export const Trades = ({
  headerData,
}: {
  headerData: {
    volume: { curr: number; prev: number };
    points: {
      curr: number;
      prev: number;
    };
  };
}) => {
  const navigate = useNavigate();

  const { volume, points } = headerData;

  const statsCards: { leftCard: CardInfo; rightCard: CardInfo } = {
    leftCard: {
      title: "Traded volume",
      value: volume.curr,
      prevValue: volume.prev,
      prefix: "$",
      precision: 2,
    },
    rightCard: {
      title: "Points from trades",
      value: points.curr,
      prevValue: points.prev,
    },
  };

  return (
    <div className="relative flex-1 h-full flex flex-col gap-4">
      <StatsHeader cards={statsCards} />
      {volume.curr === 0 || points.curr === 0 ? (
        <Button
          variant={ButtonVariants.Primary}
          onClick={() => {
            navigate(RoutePath.Buy);
          }}
        >
          Trade
        </Button>
      ) : (
        <TradesPointsAnimation
          points={points.curr}
          previousPoints={points.prev}
        />
      )}
    </div>
  );
};