import { ImageResponse } from 'next/og';
import { fetchPostBySlug } from '@/lib/rss';

export const runtime = 'edge';
export const alt = "An essay from Alpha's Words";
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await fetchPostBySlug(params.slug);

  const title = post?.title ?? "Alpha's Words";
  const tag = post?.tags[0]?.toUpperCase() ?? 'ESSAY';
  const readingTime = post?.readingTime ? `${post.readingTime} MIN READ` : '';

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          backgroundColor: '#0a0a0a',
          padding: '64px 72px',
          fontFamily: 'sans-serif',
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ display: 'flex', color: '#f2f1ed', fontSize: 22, letterSpacing: 2 }}>
            ALPHA&apos;S WORDS
          </div>
          <div style={{ display: 'flex', color: '#8a8a84', fontSize: 20, letterSpacing: 2 }}>
            {[tag, readingTime].filter(Boolean).join(' · ')}
          </div>
        </div>

        <div
          style={{
            display: 'flex',
            color: '#f2f1ed',
            fontSize: title.length > 46 ? 58 : 70,
            fontWeight: 700,
            letterSpacing: -1.5,
            lineHeight: 1.12,
            maxWidth: 980,
          }}
        >
          {title}
        </div>

        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderTop: '1px solid #2a2a28',
            paddingTop: 28,
          }}
        >
          <div style={{ display: 'flex', color: '#6b6b65', fontSize: 18 }}>By Alpha Dube</div>
          <div style={{ display: 'flex', color: '#6b6b65', fontSize: 18, letterSpacing: 1 }}>
            ALPHASWORDS.COM
          </div>
        </div>
      </div>
    ),
    { ...size }
  );
}
