/**
 * Generate placeholder blog images
 * Run: node scripts/generate-blog-placeholders.js
 */

const fs = require('fs');
const path = require('path');

const blogImagesDir = path.join(__dirname, '../public/images/blog');

// Generate SVG placeholders that will work as blog cover images
const placeholders = [
  {
    name: 'ai-appointments.jpg',
    svg: `<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1200" height="630" fill="url(#grad1)"/>
  <text x="600" y="280" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="#1abc9c" text-anchor="middle">🤖 AI Appointments</text>
  <text x="600" y="370" font-family="Arial, sans-serif" font-size="40" fill="#ffffff" text-anchor="middle">Smart Scheduling &amp; Automation</text>
</svg>`
  },
  {
    name: 'whatsapp-business.jpg',
    svg: `<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#25D366;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#128C7E;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1200" height="630" fill="url(#grad2)"/>
  <text x="600" y="280" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="#ffffff" text-anchor="middle">💬 WhatsApp Business</text>
  <text x="600" y="370" font-family="Arial, sans-serif" font-size="40" fill="#ffffff" text-anchor="middle" opacity="0.9">Next-Gen Communication</text>
</svg>`
  },
  {
    name: 'reduce-no-shows.jpg',
    svg: `<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1200" height="630" fill="url(#grad3)"/>
  <text x="600" y="280" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="#ffffff" text-anchor="middle">📅 Reduce No-Shows</text>
  <text x="600" y="370" font-family="Arial, sans-serif" font-size="40" fill="#ffffff" text-anchor="middle" opacity="0.9">Automated Reminders &amp; Confirmations</text>
</svg>`
  }
];

console.log('✅ Blog placeholder images generation script ready!');
console.log(`\nℹ️  Since we already have SVG files in ${blogImagesDir}, we'll use those.`);
console.log('\nExisting blog images:');

// List existing images
const files = fs.readdirSync(blogImagesDir);
files.forEach(file => {
  console.log(`  - ${file}`);
});

console.log('\n💡 The blog posts will use the existing SVG files as cover images.');
console.log('   SVG files work perfectly as Next.js Image sources!\n');
