<script>
  import GlitchText from './GlitchText.svelte';
  import CRTScreen from './CRTScreen.svelte';
  import { formatDate } from '../utils/date.js';

  export let post = {
    slug: '',
    title: '',
    excerpt: '',
    date: '',
    author: ''
  };
</script>

<CRTScreen class="blog-card">
  <div class="card-content">
    <h3 class="card-title">
      <GlitchText text={post.title} size="1.2rem" />
    </h3>
    
    <p class="card-excerpt">{post.excerpt}</p>
    
    <div class="card-meta">
      <span class="card-date">{formatDate(post.date)}</span>
      <span class="card-author">by {post.author}</span>
    </div>
    
    <div class="card-actions">
      <a href={`/blog/${post.slug}`} class="read-more">Читать →</a>
    </div>
  </div>
</CRTScreen>

<style>
  .blog-card {
    margin-bottom: 20px;
    transition: transform 0.3s ease;
  }

  .blog-card:hover {
    transform: translateY(-2px);
  }

  .card-title {
    margin: 0 0 10px 0;
    color: #33ff00;
  }

  .card-excerpt {
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 15px;
  }

  .card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 15px;
  }

  .read-more {
    color: #ff00ff;
    text-decoration: none;
    font-weight: bold;
  }

  .read-more:hover {
    text-decoration: underline;
  }
</style>