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

export default function PriceDisplay({ price, isDetail = false }: { price: string, isDetail?: boolean }) {
  const [isLogged, setIsLogged] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setMounted(true);
    const uid = localStorage.getItem('vgproducts_uid') || sessionStorage.getItem('USERID');
    if (uid) {
      setIsLogged(true);
    }
  }, []);

  if (!mounted) {
    return <div style={{ minHeight: isDetail ? '36px' : '27px', marginBottom: isDetail ? '32px' : '16px' }}></div>;
  }

  if (!isLogged) {
    return null;
  }

  if (isDetail) {
    return (
      <div style={{ fontSize: '24px', fontWeight: 700, color: 'var(--orange)', fontFamily: 'var(--font-display)', marginBottom: '32px' }}>
        {price}
      </div>
    );
  }

  return (
    <div style={{ fontFamily: 'var(--font-display)', fontSize: '18px', fontWeight: 700, color: 'var(--orange)', marginBottom: '16px' }}>
      {price}
    </div>
  );
}