"use client";
import { useState, useEffect } from "react";

interface Props {
  initialPrice: number;
  className?: string;
}

export default function ProductPriceDisplay({ initialPrice, className }: Props) {
  const [price, setPrice] = useState(initialPrice);

  useEffect(() => {
    const handler = (e: CustomEvent<{ price: number }>) => setPrice(e.detail.price);
    window.addEventListener("variationPriceChanged", handler as EventListener);
    return () => window.removeEventListener("variationPriceChanged", handler as EventListener);
  }, []);

  return <span className={className}>${price}</span>;
}