Card Select

import {
	CardSelect as PDSCardSelect,
	CardSelectProps as PDSCardSelectProps,
} from '@pantheon-systems/pds-toolkit-react';

import { mergeClasses } from '../_base/Button/utils';

import './card-select.css';

export interface CardSelectProps extends PDSCardSelectProps {
	/**
	 * Show the drop shadow on each card. `true` (default) is the PDS look. When
	 * `false`, the shadow is removed: an unselected card has a border in the
	 * input border color and a hovered card gets a background tint. The
	 * selected card is marked by the check indicator, or by the focus ring when
	 * `showIndicator` is `false`.
	 */
	shadow?: boolean;
}

/**
 * Card Select UI component. The PDS Card Select with a `shadow` prop, for
 * layouts and surfaces where the card drop shadow is too heavy.
 */
export const CardSelect = ({
	className,
	shadow = true,
	...props
}: CardSelectProps) => {
	return (
		<PDSCardSelect
			className={mergeClasses([
				!shadow ? 'pds-card-select--no-shadow' : null,
				className,
			])}
			{...props}
		/>
	);
};