// @design-system: domain/PriceDisplay

import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { formatPriceDiscount } from '@/lib/format';
import { useLocale } from '@/lib/i18n/react';
import { priceDisplayVariants, originalPriceVariants, discountedPriceVariants } from './variants';

/** Props for PriceDisplay */
export interface PriceDisplayProps
  extends VariantProps<typeof priceDisplayVariants>, VariantProps<typeof originalPriceVariants> {
  /** Original (before discount) price in ILS. */
  original: number;
  /** Discounted price in ILS. */
  discounted: number;
  /** Layout direction. @default 'inline' */
  layout?: 'inline' | 'stacked';
  /** Text size. @default 'md' */
  size?: 'sm' | 'md' | 'lg';
  /** Additional class names. */
  className?: string;
}

/**
 * PriceDisplay - shows original (strikethrough) + discounted price in brand color.
 *
 * @example
 * ```tsx
 * <PriceDisplay original={90} discounted={45} size="lg" />
 * ```
 */
export function PriceDisplay({
  original,
  discounted,
  layout = 'inline',
  size = 'md',
  className,
}: PriceDisplayProps) {
  const { locale } = useLocale();
  const { originalLabel, discountedLabel, percent } = formatPriceDiscount(
    original,
    discounted,
    locale,
  );

  return (
    <div
      className={cn(priceDisplayVariants({ layout }), className)}
      aria-label={`${discountedLabel} (${percent}% off from ${originalLabel})`}
    >
      <span className={cn(originalPriceVariants({ size }))} aria-hidden="true" dir="ltr">
        {originalLabel}
      </span>
      <span
        className={cn(discountedPriceVariants({ size }))}
        aria-label={discountedLabel}
        dir="ltr"
      >
        {discountedLabel}
      </span>
    </div>
  );
}