import { useTranslation } from 'react-i18next';
import { cn } from '@/lib/utils';

export default function PriceDisplay({
  product = {},
  className = 'product-price',
  headingTag: Heading = 'h3',
  subHeadingTag: SubHeading = 'h4',
  headingClass = '',
  subHeadingClass = '',
}) {
  const { t } = useTranslation();

  const price = product.price || 0;
  const specialPrice = product.specialPrice || 0;
  const discount = price > 0 ? ((price - specialPrice) / price) * 100 : 0;

  return (
    <div className={cn(className, 'flex flex-col gap-1 mt-1')}>
      {product.negotiable ? (
        <Heading className={`${headingClass} primary-color`}>{product.negotiable_label}</Heading>
      ) : product.formatedSpecialPrice &&
        product.formatedSpecialPrice != '' &&
        product.formatedSpecialPrice != 0 &&
        product.formatedSpecialPrice != null ? (
        <>
          {discount > 0 && (
            <SubHeading className={subHeadingClass}>
              <del className='block text-secondColor text-xs line-through' dangerouslySetInnerHTML={{ __html: product.formattedPrice }} />
              <span className='block text-secondColor text-xs'>
                {parseFloat(discount, 2).toFixed(2)}% {t('off')}
              </span>
            </SubHeading>
          )}
          <Heading className={headingClass}>
            <span dangerouslySetInnerHTML={{ __html: product.formatedSpecialPrice }} />
            {product.typeId === 'booking' && <span className='block text-secondColor text-xs'>{t('per-appointment')}</span>}
          </Heading>
        </>
      ) : (
        <Heading className={headingClass}>
          <span dangerouslySetInnerHTML={{ __html: product.formattedFinalPrice }} />
          {product.typeId === 'booking' && <span className='block text-secondColor text-xs'>{t('per-appointment')}</span>}
        </Heading>
      )}
    </div>
  );
}