import React from "react";
import { formatPrice } from "../../utils/helpers";
import { Bar, BarItem } from "../Bar";

export interface PriceProps {
  price?: number;
  discount?: number;
  freeLabel?: string;
  label?: string;
  discountMonthsCount?: number;
}

const Price: React.FC<PriceProps> = ({
  price,
  discount,
  freeLabel,
  label,
  discountMonthsCount,
}) => {
  const isDiscountPrimary = !price && !!discount;
  return price !== undefined || discount !== undefined ? (
    <>
      {discount && price && (
        <>
          <del className="text-secondary">{formatPrice(price)}</del>
          <br />
        </>
      )}
      <Bar className="bold justify-content-end mb-none">
        <BarItem className={"hide-sm"}>
          {discountMonthsCount && isDiscountPrimary
            ? `1. – ${discountMonthsCount}. mesiac`
            : label}
        </BarItem>

        <BarItem>
          {isDiscountPrimary
            ? formatPrice(-discount!)
            : price! - (discount ?? 0) === 0
              ? freeLabel
              : formatPrice(price! - (discount ?? 0))}
        </BarItem>
      </Bar>
    </>
  ) : null;
};

export default Price;