import React from 'react';

import { Card, List, Tag,PostImage } from '../../styles/components/blog/PostsList.style';
import { Link } from '../../i18n';
import NewsletterCard from './NewsletterCard';

export interface PostItem {
  uid: string;
  image: string;
  tag: string;
  tagUid: string;
  title: string;
  description: string;
}

interface Props {
  posts: PostItem[];
  firstMain?: boolean;
  hideNewsletter?: boolean;
}

const PostsList: React.FC<Props> = ({ posts, firstMain = false, hideNewsletter }) => (
  <List firstMain={firstMain}>
    {posts.map(({ uid, image, tag, tagUid, title, description }, index) =>
      <React.Fragment key={`post-${index}`}>
        <Link href={`/blog/[tag]/[post]?tag=${tagUid}&post=${uid}`} as={`/blog/${tagUid}/${uid}`}>
          <Card id={`article-${index}`}>
            <PostImage image={image} />
            <article>
              <Tag>{tag}</Tag>
              <h3>{title}</h3>
              <p>{description}</p>
              <span>Lire la suite</span>
            </article>
          </Card>
        </Link>
        {!hideNewsletter && (firstMain ? 2 : 1) === index && <NewsletterCard/>}
      </React.Fragment>
    )}
  </List>
);

export default PostsList;