import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Timeline',
};
const Template = new Builder(args => `<x-timeline ${toProps(args)}>
	<x-timeline-header>14 JUNIO 2022</x-timeline-header>

	<x-timeline-item meta="por John Doe" time="2022-06-22 09:05:00">
		El cobro fue abierto
	</x-timeline-item>

	<x-timeline-item color="warning" accent time="2022-06-22 16:24:00">
		Webhook fallido
	</x-timeline-item>

	<x-timeline-item color="red" time="2022-06-22 18:39:00">
		Se envio un correo de confirmación
	</x-timeline-item>

	<x-timeline-item color="success" accent time="2022-06-22 22:55:00" meta="9.99">
		<h4>El cobro ha sido pagado</h4>
		<p>Transaccion exitosa</p>

		<div slot="collapse">
			<div class="row">
				<div class="col-6">
					<label>Monto</label>
					<p>L 1,294.99</p>
				</div>
				<div class="col-6">
					<label>Impuesto</label>
					<p>L 129.49</p>
				</div>
				<div class="col-6">
					<label>Dispositivo</label>
					<p>Windows 7, Chrome 99.76</p>
					<x-icon name="device-other" size="2rem"></x-icon>
				</div>
				<div class="col-6">
					<label>Tarjeta</label>
					<p>4936 **** **** 4568</p>
					<x-icon name="card-visa" size="2rem"></x-icon>
				</div>

				<div class="col-12">
					<label>Comentarios</label>

					<x-list>
						<x-list-item>
							<x-icon slot="left" name="comment-info" color="info" raised></x-icon>
							<p>3D-Secure <b>v.2.2.0</b></p>
						</x-list-item>
						<x-list-item>
							<x-icon slot="left" name="comment-3ds" color="yellow" raised></x-icon>
							<p>Transacción autenticada completamente <b>(05)</b></p>
						</x-list-item>
						<x-list-item>
							<x-icon slot="left" name="comment-cvn" color="purple" raised></x-icon>
							<p>El CVN coincide <b>(M)</b></p>
						</x-list-item>
						<x-list-item>
							<x-icon slot="left" name="comment-cavv" color="green" raised></x-icon>
							<p>Validación aprobada por CAVV (autenticación): transacción totalmente autenticada. Hay un cambio de responsabilidad y el comerciante está protegido contra devoluciones de cargo <b>(2)</b>.</p>
						</x-list-item>
					</x-list>
				</div>
			</div>
		</div>
	</x-timeline-item>
</x-timeline>`);
export const Simple = Template.args({}).build();
