import { useQuery } from '@apollo/client';
import { Article } from '../commons/graphql/generated';
import { ARTICLE_FOR_HOME } from '../commons/graphql/queries';
import styles from './index.module.css';

export default function Index() {
  const { data, loading } = useQuery<{articles: Article[]}>(ARTICLE_FOR_HOME);

  return <main className={styles.index}>
    <ol>
      {
        data?.articles?.map(article => <Item article={article} key={article.id} />)
      }
    </ol>
  </main>;
}

function Item({article}: {article: Article}) {
  return <li className={styles.item}>
    <h2 className={styles.title}>{article.title}</h2>
    <p className={styles.description}>{article.content}</p>
  </li>
}