import React from "react";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import ProText from "../ProText";

interface ArabicPriceProps {
  price: number | string;
  style?: React.CSSProperties;
  strong?: boolean;
  type?: "secondary" | "success" | "warning" | "danger";
  className?: string;
}

const ArabicPrice: React.FC<ArabicPriceProps> = ({
  price,
  style = {},
  strong = false,
  type,
  className,
}) => {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);

  // Format the price to ensure it has 2 decimal places
  const formattedPrice = typeof price === "number" ? price.toFixed(2) : price;

  return (
    <ProText
      strong={strong}
      type={type}
      className={className}
      style={{
        display: "inline-flex",
        alignItems: "baseline",
        gap: "0.1em",
        lineHeight: 1,
        ...style,
      }}
    >
      {isRTL ? (
        <>
          <span
            style={{
              verticalAlign: "baseline",
              lineHeight: 1,
            }}
          >
            {formattedPrice}
          </span>
          <span style={{margin: "0 0.1em"}} />
          <span
            style={{
              fontSize: "0.9em",
              verticalAlign: "baseline",
              lineHeight: 1,
              position: "relative",
              top: -3,
            }}
          >
            {t("common.omanCurrency")}
          </span>
        </>
      ) : (
        <>
          <span
            style={{
              verticalAlign: "baseline",
              lineHeight: 1,
              display: "inline-block",
            }}
          >
            {formattedPrice}
          </span>
          <span
            style={{
              fontSize: "0.9em",
              verticalAlign: "baseline",
              lineHeight: 1,
              display: "inline-block",
            }}
          >
            {t("common.omanCurrency")}
          </span>
        </>
      )}
    </ProText>
  );
};

export default ArabicPrice;