import {ImageResponse} from 'next/og';

export async function GET() {
    return new ImageResponse(
        (
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    width: '1200px',
                    height: '630px',
                    background: 'radial-gradient(circle at 20% 20%, #ff8185, transparent 80%),' +
                        'radial-gradient(circle at 80% 80%, #ffaa91, transparent 80%)',
                    backgroundSize: '100% 100%',
                    color: '#333',
                    fontFamily: 'Arial, sans-serif',
                    padding: '20px',
                }}
            >
                <div
                    style={{
                        position: 'absolute',
                        top: '20px',
                        left: '20px',
                        fontSize: '24px',
                        fontWeight: 'bold',
                        padding: '10px',
                    }}
                >
                    Dennis Konkol | Portfolio
                </div>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'flex-start',
                        justifyContent: 'center',
                        textAlign: 'left',
                        padding: '20px',
                        backgroundColor: 'rgba(182,182,182,0.8)',
                        borderRadius: '10px',
                        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                        maxWidth: '60%',
                        backdropFilter: 'blur(5px)',
                    }}
                >
                    <h1 style={{fontSize: '48px', margin: '0'}}>Hi, I’m Dennis</h1>
                    <h2 style={{fontSize: '32px', margin: '10px 0'}}>Student & Software Engineer</h2>
                    <p style={{fontSize: '24px', margin: '10px 0'}}>
                        Based in Osnabrück, Germany
                    </p>
                    <p style={{fontSize: '20px', margin: '10px 0'}}>
                        Passionate about technology, coding, and solving real-world problems.
                    </p>
                </div>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                    src="https://dki.one/images/me.jpg"
                    alt="Image of Dennis"
                    style={{
                        width: '400px',
                        height: '400px',
                        borderRadius: '10px',
                        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                        objectFit: 'cover',
                    }}
                />
            </div>
        ),
        {
            width: 1200,
            height: 630,
        }
    );
}