import type { DefaultCallouts } from '../types.ts';

/**
 * Predefined callout theme based on VitePress's callout styles. This theme includes a set of default callout types such as "note", "tip", "important", "warning", and "caution", each with its own title, indicator (SVG icon), and color scheme. The colors are defined as tuples to allow for different colors for the indicator and the title. This theme can be used as a base for styling callouts in markdown content, providing a visually appealing and consistent design that matches the VitePress aesthetic.
 */
export const vitepressCallouts: DefaultCallouts = {
	note: {
		title: 'NOTE',
		indicator:
			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></g></svg>',
		color: ['rgb(142, 150, 170)', 'rgb(101, 117, 133)'],
	},
	tip: {
		title: 'TIP',
		indicator:
			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4"/></svg>',
		color: ['rgb(100, 108, 255)', 'rgb(100, 108, 255)'],
	},
	important: {
		title: 'IMPORTANT',
		indicator:
			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zm-9-8v2m0 4h.01"/></svg>',
		color: ['rgb(159, 122, 234)', 'rgb(159, 122, 234)'],
	},
	warning: {
		title: 'WARNING',
		indicator:
			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>',
		color: ['rgb(234, 179, 8)', 'rgb(234, 179, 8)'],
	},
	caution: {
		title: 'CAUTION',
		indicator:
			'<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01M12 8v4m3.312-10a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>',
		color: ['rgb(244, 63, 94)', 'rgb(244, 63, 94)'],
	},
};
