claudia_blog/src/components/BlogPost.tsx

import React from 'react'
import { resolveMediaUrl } from '@/lib/media'
import { BlogPost, BlogPostSection } from '@/types/blog'

interface BlogPostCardProps {
  post: BlogPost
  isLatest: boolean
  compact?: boolean
}

const cardStyles = {
  container: {
    position: 'relative' as const,
    backgroundColor: 'white',
    border: '2px solid #8B7D6B',
    padding: '24px',
    marginBottom: '32px',
    boxShadow: '4px 4px 0 rgba(139, 125, 107, 0.2)'
  },
  imageWrapper: {
    marginBottom: '24px',
    marginLeft: '-24px',
    marginRight: '-24px',
    marginTop: '-24px',
    height: '280px',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    backgroundColor: 'white',
    borderBottom: '2px solid #8B7D6B'
  },
  title: {
    fontFamily: 'Abril Fatface, serif',
    fontSize: '28px',
    fontWeight: 900,
    color: '#1E1A17',
    marginBottom: '16px',
    lineHeight: 1.2
  },
  excerpt: {
    fontFamily: 'Spectral, serif',
    fontSize: '16px',
    color: '#4A4A4A',
    lineHeight: 1.6,
    marginBottom: '20px'
  }
}

function formatDate(timestamp: string) {
  const date = new Date(timestamp)
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

export function BlogPostCard({ post, isLatest, compact = false }: BlogPostCardProps) {
  const previewUrl = resolveMediaUrl(post.previewImage)

  const containerStyle = compact ? {
    ...cardStyles.container,
    padding: '12px',
    marginBottom: '0'
  } : cardStyles.container

  const imageWrapperStyle = compact ? {
    ...cardStyles.imageWrapper,
    marginLeft: '-12px',
    marginRight: '-12px',
    marginTop: '-12px',
    height: '220px'
  } : cardStyles.imageWrapper

  const titleStyle = compact ? {
    ...cardStyles.title,
    fontSize: '18px',
    marginBottom: '8px'
  } : cardStyles.title

  const excerptStyle = compact ? {
    ...cardStyles.excerpt,
    fontSize: '13px',
    marginBottom: '12px',
    lineHeight: 1.4
  } : cardStyles.excerpt

  return (
    <article style={containerStyle}>
      {post.isEditorsPick && (
        <div
          style={{
            position: 'absolute',
            top: '32px',
            left: '-60px',
            padding: '8px 64px',
            backgroundColor: '#C89C2B',
            color: '#F7F1E1',
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            letterSpacing: '0.2em',
            textTransform: 'uppercase',
            transform: 'rotate(-45deg)',
            boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
            zIndex: 2
          }}
        >
          Editor's Pick
        </div>
      )}

      {post.isSold && (
        <div
          style={{
            position: 'absolute',
            top: '32px',
            right: '-60px',
            padding: '8px 64px',
            backgroundColor: '#c0392b',
            color: '#F7F1E1',
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            letterSpacing: '0.2em',
            textTransform: 'uppercase',
            transform: 'rotate(45deg)',
            boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
            zIndex: 2
          }}
        >
          Sold
        </div>
      )}

      {isLatest && (
        <div
          style={{
            position: 'absolute',
            top: '16px',
            right: '16px',
            backgroundColor: '#1E1A17',
            color: '#F7F1E1',
            padding: '6px 12px',
            fontFamily: 'Space Mono, monospace',
            fontSize: '12px',
            letterSpacing: '0.15em',
            textTransform: 'uppercase'
          }}
        >
          Last Blog Post
        </div>
      )}

      {previewUrl && (
        <div
          style={{
            ...imageWrapperStyle,
            backgroundImage: `url('${previewUrl}')`
          }}
        />
      )}

      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: compact ? '6px' : '12px'
      }}>
        <span style={{
          fontFamily: 'Space Mono, monospace',
          fontSize: compact ? '9px' : '12px',
          textTransform: 'uppercase',
          letterSpacing: '0.1em',
          color: '#8B7D6B'
        }}>
          {formatDate(post.createdAt)}
        </span>
      </div>

      <h2 style={titleStyle}>{post.title}</h2>

      {post.linkUrl && (
        <div style={{ marginBottom: '16px' }}>
          <a
            href={post.linkUrl}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              display: 'inline-block',
              backgroundColor: '#1E1A17',
              color: '#F7F1E1',
              padding: '10px 18px',
              fontFamily: 'Space Mono, monospace',
              fontSize: '12px',
              letterSpacing: '0.15em',
              textTransform: 'uppercase',
              border: '2px solid #8B7D6B'
            }}
          >
            To Produkt
          </a>
        </div>
      )}

      {post.excerpt && <p style={excerptStyle}>{compact ? `${post.excerpt.substring(0, 80)}...` : post.excerpt}</p>}

      <a
        href={`/blog/${post.slug}`}
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '8px',
          padding: compact ? '8px 12px' : '12px 18px',
          border: compact ? '1px solid #8B7D6B' : '2px solid #8B7D6B',
          backgroundColor: 'transparent',
          fontFamily: 'Space Mono, monospace',
          fontSize: compact ? '10px' : '12px',
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          textDecoration: 'none',
          color: '#1E1A17',
          cursor: 'pointer'
        }}
      >
        Read More
      </a>
    </article>
  )
}