Added pricing parser

src/templates/Price.tsx

@@ -21,6 +21,28 @@ interface Package {
 }
 
 export default function Page({language}: {language: "en" | "ar"}) {
+	const getDurationUnit = (duration: number, durationUnitSingular: string, durationUnitPlural: string) => {
+		if(duration >= 2 && duration <= 10) {
+			return durationUnitPlural;
+		}
+
+		return durationUnitSingular;
+	}
+	const durationAndDurationUnitParser = (duration: number, duration_unit: DurationUnit) => {
+		if(language === 'ar') {
+			switch (duration_unit) {
+				case "days":
+					return `${duration} ${getDurationUnit(duration, translation.days.singular[language], translation.days.plural[language])}`;
+				case "weeks":
+					return `${duration} ${getDurationUnit(duration, translation.weeks.singular[language], translation.weeks.plural[language])}`;
+				case "months":
+					return `${duration} ${getDurationUnit(duration, translation.months.singular[language], translation.months.plural[language])}`;
+			}
+		}
+
+		return capitalize(duration === 1 ? duration_unit.slice(0, duration_unit.length - 1) : duration_unit);
+	}
+
 	const [payments, setPayments] = React.useState<Package[]>([]);
 	const getData = async () => {
 		// Fetch data from external API
@@ -51,8 +73,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
 							<div className="flex flex-col items-start mb-2">
 								<Image src="/logo_title.png" alt="EnCoach's Logo" width={32} height={32} />
 								<span className="font-semibold text-xl">
-									EnCoach - {p.duration}{" "}
-									{capitalize(p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit)}
+									{translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
 								</span>
 							</div>
 							<div className="flex flex-col gap-2 items-start w-full">