/**
 * Card with icon, title, description and action button.
 */
import {
	Card,
	CardBody,
	Flex,
	FlexItem,
	Button,
	Icon,
} from '@wordpress/components';
import { useWindowSize } from '../../shared/hooks';

export interface ActionCardProps {
	icon: React.JSX.Element;
	title: string;
	description: string;
	buttonLabel: string;
	buttonIcon?: React.JSX.Element;
	onButtonClick: () => void;
}

export default function ActionCard({
	icon,
	title,
	description,
	buttonLabel,
	buttonIcon,
	onButtonClick,
}: ActionCardProps) {
	const { isMdOrUp } = useWindowSize();
	return (
		<Card
			size="small"
			style={{
				marginBottom: 16,
				background: '#fff',
				boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
			}}
		>
			<CardBody>
				<Flex justify="space-between" align="center" wrap={!isMdOrUp} gap={4}>
					<Flex gap={3} justify="flex-start">
						<Icon icon={icon} size={28} />
						<FlexItem>
							<div style={{ fontWeight: 600, marginBottom: 4, fontSize: '0.9375rem' }}>
								{title}
							</div>
							<div style={{ fontSize: 13, color: '#646970', lineHeight: 1.4 }}>
								{description}
							</div>
						</FlexItem>
					</Flex>
					<Button variant="secondary" onClick={onButtonClick} icon={buttonIcon} size="default" style={{ flexShrink: 0 }}>
						{buttonLabel}
					</Button>
				</Flex>
			</CardBody>
		</Card>
	);
}