/**
 * Preferred quotes list — displays top recommended services in a grid/stack layout.
 */
import { Flex } from '@wordpress/components';
import type { Quote, Dropshop } from '../../types';
import { useWindowSize } from '../../shared/hooks';
import PreferredQuoteCard from './preferred-quote';

interface PreferredQuotesProps {
	quotes: Quote[];
	onSelect: (quote: Quote, extras: string[], amount: number) => void;
	fullProtection: boolean;
	totalValue: number;
	dropshops: Record<string, Dropshop[]>;
	disabled?: boolean;
}

export default function PreferredQuotes({
	quotes,
	onSelect,
	fullProtection,
	totalValue,
	dropshops,
	disabled = false,
}: PreferredQuotesProps) {
	const { isSmOrUp } = useWindowSize();

	if (!quotes || quotes.length === 0) {
		return null;
	}

	// Stack vertically on mobile, grid on larger screens
	if (!isSmOrUp) {
		return (
			<Flex direction="column" gap={4} style={{marginBottom: '20px'}}>
				{quotes.map((quote, index) => (
					<PreferredQuoteCard
						key={quote.service.slug}
						quote={quote}
						onSelect={onSelect}
						fullProtection={fullProtection}
						totalValue={totalValue}
						dropshops={dropshops[quote.service.dropOffProviderGroup] ?? []}
						isPreferred={index === 0}
						disabled={disabled}
					/>
				))}
			</Flex>
		);
	}

	// Grid layout for larger screens
	return (
		<div
			style={{
				display: 'grid',
				gridTemplateColumns: 'repeat(auto-fit, minmax(0, calc(50% - 10px)))',
				gap: 20,
				maxWidth: '100%',
                marginBottom: '20px',
			}}
		>
			{quotes.map((quote, index) => (
				<PreferredQuoteCard
					key={quote.service.slug}
					quote={quote}
					onSelect={onSelect}
					fullProtection={fullProtection}
					totalValue={totalValue}
					dropshops={dropshops[quote.service.dropOffProviderGroup] ?? []}
					isPreferred={index === 0}
					disabled={disabled}
				/>
			))}
		</div>
	);
}