import { FC } from 'react';
import { Link } from 'react-router-dom';
import styles from './BlogCard.module.css';

interface BlogPost {
  title: string;
  date: string;
  excerpt: string;
  slug: string;
}

interface BlogCardProps {
  post: BlogPost;
}

const BlogCard: FC<BlogCardProps> = ({ post }) => {
  return (
    <Link to={`/blog/${post.slug}`} className={styles.card}>
      <article>
        <h2 className={styles.title}>{post.title}</h2>
        <time className={styles.date}>{new Date(post.date).toLocaleDateString()}</time>
        <p className={styles.excerpt}>{post.excerpt}</p>
      </article>
    </Link>
  );
};

export default BlogCard;