export function createShareCard(profile, session) {
    const canvas = document.createElement('canvas');
    canvas.width = 1200;
    canvas.height = 630;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#0b0b0b';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#f7f4ea';
    ctx.fillRect(44, 44, canvas.width - 88, canvas.height - 88);
    ctx.fillStyle = '#111';
    ctx.font = '700 64px ui-monospace, monospace';
    ctx.fillText('DATA RECEIPT', 92, 135);

    ctx.font = '28px ui-monospace, monospace';
    drawLine(ctx, 'Data Shadow', String(session.currencies.dataShadow), 92, 225);
    drawLine(ctx, 'Permissions accepted', String(session.behavioral.promptDecisions.filter((item) => item.accepted).length), 92, 280);
    drawLine(ctx, 'Consent speed', `${(session.consentTelemetry.decisionMs / 1000).toFixed(1)}s`, 92, 335);
    drawWrapped(ctx, profile.advertising.segment, 92, 420, 860, 34);

    ctx.font = '700 30px ui-monospace, monospace';
    ctx.fillText('Accept the Cookie — makefuture.ro', 92, 565);
    return canvas.toDataURL('image/png');
}

function drawLine(ctx, label, value, x, y) {
    ctx.fillStyle = '#6b6b62';
    ctx.fillText(`${label}:`, x, y);
    ctx.fillStyle = '#111';
    ctx.fillText(value, x + 370, y);
}

function drawWrapped(ctx, text, x, y, maxWidth, lineHeight) {
    ctx.fillStyle = '#111';
    const words = `"${text}"`.split(' ');
    let line = '';
    for (const word of words) {
        const test = line ? `${line} ${word}` : word;
        if (ctx.measureText(test).width > maxWidth) {
            ctx.fillText(line, x, y);
            line = word;
            y += lineHeight;
        } else {
            line = test;
        }
    }
    if (line) ctx.fillText(line, x, y);
}