import React from 'react';

import { getDisplayPrice } from '@/app/(root)/account/AuraSubscriptions/CurrencySelector';
import { Currency } from '@/app/(root)/account/constants';

interface PriceRowProps {
  label: string;
  amount: number;
  currency: Currency;
  isNegative?: boolean;
  isBold?: boolean;
  className?: string;
  amountClassName?: string;
  'aria-label'?: string;
}

export const PriceRow: React.FC<PriceRowProps> = ({
  label,
  amount,
  currency,
  isNegative = false,
  isBold = false,
  className = '',
  amountClassName = '',
  'aria-label': ariaLabel,
}) => {
  const displayAmount = getDisplayPrice(amount, currency);
  const formattedAmount = isNegative ? `-${displayAmount}` : displayAmount;

  return (
    <div
      className={`mb-2 flex justify-between ${className}`}
      aria-label={ariaLabel}
      role={ariaLabel ? 'listitem' : undefined}
    >
      <span className={isBold ? 'font-bold' : ''}>{label}</span>
      <span className={`${isBold ? 'font-bold' : ''} ${amountClassName}`}>
        {formattedAmount}
      </span>
    </div>
  );
};

interface TaxDisplayProps {
  taxAmount: number;
  currency: Currency;
  className?: string;
}

export const TaxDisplay: React.FC<TaxDisplayProps> = ({
  taxAmount,
  currency,
  className = '',
}) => (
  <PriceRow
    label='Tax'
    amount={taxAmount}
    currency={currency}
    className={className}
    aria-label={`Tax amount: ${getDisplayPrice(taxAmount, currency)}`}
  />
);

interface PricingSectionProps {
  children: React.ReactNode;
  className?: string;
}

export const PricingSection: React.FC<PricingSectionProps> = ({
  children,
  className = '',
}) => (
  <div className={`mb-6 rounded-lg bg-white/10 p-4 ${className}`}>
    {children}
  </div>
);

interface DividerProps {
  className?: string;
}

export const PriceDivider: React.FC<DividerProps> = ({ className = '' }) => (
  <div className={`my-2 h-px bg-white/20 ${className}`}></div>
);