import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = req.nextUrl;
  const title = searchParams.get('title');
  const description = searchParams.get('description');
  const font = fetch(new URL('./mono.ttf', import.meta.url)).then((res) =>
    res.arrayBuffer(),
  );
  const fontData = await font;

  return new ImageResponse(
    (
      <div
        style={{ 
          display: 'flex', 
          height: '100%', 
          width: '100%', 
          backgroundColor: '#000', 
          color: '#fff',
          fontFamily: 'Geist Sans' 
        }}
      >
        <div style={{ 
          position: 'absolute',
          border: '1px dashed #404040',
          top: 0,
          bottom: 0,
          left: '64px',
          width: '1px'
        }} />
        {/* Repite el mismo patrón para los otros bordes */}
        
        <div style={{ 
          position: 'absolute',
          display: 'flex',
          flexDirection: 'column',
          width: '896px',
          justifyContent: 'center',
          top: '128px',
          bottom: '128px',
          left: '128px',
          right: '128px'
        }}>
          <div style={{ 
            letterSpacing: '-0.04em',
            textWrap: 'balance' as any,
            fontWeight: 600,
            fontSize: title && title.length > 20 ? 64 : 80,
            lineHeight: '1.1'
          }}>
            {title}
          </div>
          <div style={{ 
            fontSize: '40px',
            lineHeight: '1.5',
            color: '#a3a3a3',
            fontWeight: 500,
            textWrap: 'balance' as any
          }}>
            {`${description?.slice(0, 100)}`}
          </div>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 628,
      fonts: [
        {
          name: 'Jetbrains Mono',
          data: fontData,
          style: 'normal',
        },
      ],
    }
  );
}