import { ImageResponse } from 'next/og';
import { blogPosts } from '../../../../src/data/blogPosts';

export const runtime = 'edge';

export async function GET(
  request: Request,
  { params }: { params: Promise<{ slug?: string[] }> }
) {
  const { slug: slugArray } = await params;
  const slug = slugArray?.[0] || 'home';

  let title: string;
  let description: string;

  if (slug === 'home') {
    title = 'Marc Mintel';
    description = 'Technical problem solver\'s blog - practical insights and learning notes';
  } else {
    const post = blogPosts.find(p => p.slug === slug);
    title = post?.title || 'Marc Mintel';
    description = (post?.description || 'Technical problem solver\'s blog - practical insights and learning notes').slice(0, 100);
  }

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
          backgroundColor: '#fff',
          padding: '60px',
        }}
      >
        <div
          style={{
            position: 'absolute',
            top: '60px',
            right: '60px',
            width: '120px',
            height: '4px',
            backgroundColor: '#3b82f6',
            borderRadius: '2px',
          }}
        />
        <div
          style={{
            fontSize: '48px',
            fontWeight: 700,
            color: '#1e293b',
            marginBottom: '20px',
            fontFamily: 'sans-serif',
          }}
        >
          {title}
        </div>
        <div
          style={{
            fontSize: '24px',
            fontWeight: 400,
            color: '#64748b',
            marginBottom: 'auto',
            fontFamily: 'sans-serif',
          }}
        >
          {description}
        </div>
        <div
          style={{
            fontSize: '18px',
            fontWeight: 500,
            color: '#94a3b8',
            fontFamily: 'sans-serif',
          }}
        >
          mintel.me
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}