'use client';

import { VatBreakdown } from '@/components/ui/domain/VatBreakdown/VatBreakdown';
import { useLocale, useT } from '@/lib/i18n/react';
import { formatAgorotLocale } from '@/lib/money';

export interface CheckoutPriceSummaryProps {
  unitPriceAgorot: number;
  quantity: number;
  discountAgorot: number;
  shippingAgorot: number;
  vatRatePercent: number;
}

export function CheckoutPriceSummary({
  unitPriceAgorot,
  quantity,
  discountAgorot,
  shippingAgorot,
  vatRatePercent,
}: CheckoutPriceSummaryProps) {
  const t = useT('checkout_modal');
  const { locale } = useLocale();

  const subtotalAgorot = unitPriceAgorot * quantity;
  const totalAgorot = Math.max(0, subtotalAgorot - discountAgorot + shippingAgorot);

  return (
    <div className="flex flex-col gap-2 text-sm">
      <div className="flex justify-between">
        <span className="text-text-secondary">{t('subtotal')}</span>
        <span>{formatAgorotLocale(subtotalAgorot, locale)}</span>
      </div>
      {discountAgorot > 0 && (
        <div className="text-success flex justify-between">
          <span>{t('discount')}</span>
          <span>-{formatAgorotLocale(discountAgorot, locale)}</span>
        </div>
      )}
      {shippingAgorot > 0 && (
        <div className="flex justify-between">
          <span className="text-text-secondary">{t('shipping')}</span>
          <span>{formatAgorotLocale(shippingAgorot, locale)}</span>
        </div>
      )}
      {vatRatePercent === 0 && (
        <div className="border-border mt-1 flex justify-between border-t pt-2 font-semibold">
          <span>{t('total')}</span>
          <span>{formatAgorotLocale(totalAgorot, locale)}</span>
        </div>
      )}
      {vatRatePercent > 0 && (
        <VatBreakdown totalAgorot={totalAgorot} vatRatePercent={vatRatePercent} className="mt-2" />
      )}
    </div>
  );
}