import { PriceDisplay } from '@/components/ui/PriceDisplay';
import { Text } from '@/components/ui/Typography';
import { Flex } from '@/components/ui/layout';
import Badge from '@/components/ui/Badge';
import React from 'react';

interface ProductPricingProps {
  unitPrice: number | null;
  moq?: number | null;
  onRequestTKey: string;
}

interface ServicePricingProps {
  hourlyRate: number | null;
  serviceAreaKm?: number | null;
  onRequestTKey: string;
}

interface CommunityPricingProps {
  price: number | null;
  priceType?: string | null;
  freeTKey: string;
}

type MatchCardPricingProps =
  | ({ type: 'product' } & ProductPricingProps)
  | ({ type: 'service' } & ServicePricingProps)
  | ({ type: 'community' } & CommunityPricingProps);

/**
 * Reusable pricing component for discovery match cards
 * Handles different pricing types (product, service, community)
 */
export const MatchCardPricing: React.FC<MatchCardPricingProps> = (props) => {
  if (props.type === 'product') {
    return (
      <Flex align="baseline" gap="md" wrap="wrap">
        <PriceDisplay
          value={props.unitPrice}
          priceType="unit"
          unitTKey="common.currency.perUnit"
          onRequestTKey={props.onRequestTKey}
        />
        {props.moq != null && props.moq > 0 && (
          <Text variant="muted" tKey="discoveryPage.moq" replacements={{ moq: props.moq }} />
        )}
      </Flex>
    );
  }

  if (props.type === 'service') {
    return (
      <Flex align="baseline" gap="md" wrap="wrap">
        <PriceDisplay
          value={props.hourlyRate}
          priceType="hourly"
          unitTKey="common.currency.perHour"
          onRequestTKey={props.onRequestTKey}
        />
        {props.serviceAreaKm != null && (
          <Text
            variant="muted"
            tKey="discoveryPage.serviceArea"
            replacements={{ area: props.serviceAreaKm }}
          />
        )}
      </Flex>
    );
  }

  // Community pricing
  return (
    <Flex align="baseline" gap="md" wrap="wrap">
      <PriceDisplay
        value={props.price}
        priceType={props.price ? 'fixed' : 'free'}
        freeTKey={props.freeTKey}
      />
      {props.priceType && (
        <Badge variant="secondary" className="text-xs">
          {props.priceType}
        </Badge>
      )}
    </Flex>
  );
};

export default React.memo(MatchCardPricing);