sarlink-portal/components/price-calculator.tsx

"use client";
import {
  discountPercentageAtom,
  formulaResultAtom,
  initialPriceAtom,
  numberOfDaysAtom,
  numberOfDevicesAtom,
} from "@/lib/atoms";
import { useAtom } from "jotai";
import { useEffect } from "react";
import NumberInput from "./number-input";


export default function PriceCalculator() {
  const [initialPrice, setInitialPrice] = useAtom(initialPriceAtom);
  const [discountPercentage, setDiscountPercentage] = useAtom(
    discountPercentageAtom,
  );
  const [numberOfDevices, setNumberOfDevices] = useAtom(numberOfDevicesAtom);
  const [numberOfDays, setNumberOfDays] = useAtom(numberOfDaysAtom);
  const [formulaResult, setFormulaResult] = useAtom(formulaResultAtom);

  useEffect(() => {
    const basePrice = initialPrice + (numberOfDevices - 1) * discountPercentage;
    setFormulaResult(
      `Price for ${numberOfDevices} device(s) over ${numberOfDays} day(s): MVR ${basePrice.toFixed(2)}`,
    );
  }, [
    initialPrice,
    discountPercentage,
    numberOfDevices,
    numberOfDays,
    setFormulaResult,
  ]);

  return (
    <div className="border p-2 rounded-xl">
      <div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
        <h3 className="text-sarLinkOrange text-2xl">
          Price Calculator
        </h3>
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {/* Initial Price Input */}
        <NumberInput
          label="Initial Price"
          value={initialPrice}
          onChange={(value) => setInitialPrice(value)}
        />
        {/* Number of Devices Input */}
        <NumberInput
          label="Number of Devices"
          value={numberOfDevices}
          onChange={(value) => setNumberOfDevices(value)}
        />
        {/* Number of Days Input */}
        <NumberInput
          label="Number of Days"
          value={numberOfDays}
          onChange={(value) => setNumberOfDays(value)}
        />

        {/* Discount Percentage Input */}
        <NumberInput
          label="Discount Percentage"
          value={discountPercentage}
          onChange={(value) => setDiscountPercentage(value)}
        />
      </div>

      <div className="mt-4">
        <div className="title-bg relative rounded-lg border border-input shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
          <label
            htmlFor=""
            className="block px-3 pt-2 text-md font-medium text-foreground"
          >
            Total
          </label>
          <input
            className="flex font-mono font-semibold h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
            value={formulaResult}
            readOnly
            placeholder={"Result"}
          />
        </div>
      </div>
    </div>
  );
}