/**
 * Courier logo + name badge — shared between ServiceQuotes and ConfirmBookingModal.
 */
import React from 'react';
import { __ } from '@wordpress/i18n';
import { Flex } from '@wordpress/components';
import { getCourierLogo } from '../utils/getAsset';

interface CourierBadgeProps {
	/** Courier slug for logo lookup (e.g. "dpd", "evri"). */
	slug: string;
	/** Courier display name (e.g. "DPD"). */
	courier: string;
	/** Service display name (e.g. "Next-Day Delivery"). */
	name: string;
	/** Logo size in pixels (default 40). */
	size?: number;
}

function CourierBadgeInner({ slug, courier, name, size = 40 }: CourierBadgeProps) {
	const logo = getCourierLogo(slug);

	return (
		<Flex align="center" justify="flex-start" gap={3}>
			<img
				src={logo}
				alt={name}
				style={{
					width: size,
					height: size,
					borderRadius: 4,
					objectFit: 'contain',
					background: '#f0f0f0',
					flexShrink: 0,
				}}
			/>
			<div style={{ fontWeight: 600 }}>
				{courier + ' ' + name}
			</div>
		</Flex>
	);
}

const CourierBadge = React.memo(CourierBadgeInner);
export default CourierBadge;