import cx from "classnames";
import React from "react";

import { formatPrice } from "../../utils/helpers";

export interface FooterPriceColumnProps {
  discount?: number;
  label: string;
  price?: number;
  size?: "large";
}

const FooterPriceColumn: React.FC<FooterPriceColumnProps> = ({
  price,
  discount = 0,
  label,
  size,
}) => {
  if (typeof price === "undefined") {
    return null;
  }

  return (
    <>
      {discount > 0 && (
        <del className="text-secondary">{formatPrice(price)}</del>
      )}
      <div>
        <div
          className={cx("text-accent mb-none", {
            h4: size !== "large",
            h2: size === "large",
          })}
        >
          {formatPrice(price - discount)}
        </div>
        <span
          className={cx("text-accent mb-none", {
            h6: size !== "large",
            h3: size === "large",
          })}
        >
          {label}
        </span>
      </div>
    </>
  );
};

FooterPriceColumn.displayName = "FooterPriceColumn";

export default FooterPriceColumn;