/**
 * Template Card component.
 *
 * @package Schema_AI
 */

import { Button, Card, CardBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function TemplateCard( { template, onApply } ) {
	return (
		<Card className="schema-ai-template-card">
			<CardBody>
				<div className="schema-ai-template-card-header">
					<span className="schema-ai-badge">{ template.schema_type }</span>
					{ template.uses > 0 && <span className="schema-ai-template-uses">{ `${ template.uses } uses` }</span> }
				</div>
				<h3>{ template.name }</h3>
				<p>{ template.description }</p>
				<div className="schema-ai-template-card-actions">
					<Button variant="primary" onClick={ () => onApply && onApply( template ) } isSmall>
						{ __( 'Use Template', 'schema-ai' ) }
					</Button>
				</div>
			</CardBody>
		</Card>
	);
}

export default TemplateCard;