import type { CardDefinition } from '../types';
import DrawCard from './DrawCard.svelte';
import EditingDrawCard from './EditingDrawCard.svelte';

export const DrawCardDefinition = {
	type: 'draw',
	name: 'Drawing',
	contentComponent: DrawCard,
	editingContentComponent: EditingDrawCard,
	sidebarButtonText: 'Draw',
	defaultColor: 'base',
	allowSetColor: true,
	minW: 2,
	minH: 2,
	createNew: (item) => {
		item.w = 4;
		item.h = 4;
		item.mobileW = 4;
		item.mobileH = 4;
		item.cardData = {
			strokesJson: '[]',
			viewBox: '',
			strokeWidth: 1,
			locked: true
		};
	},

	groups: ['Visual'],
	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /></svg>`

} as CardDefinition & { type: 'draw' };