import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonPage,
  IonTitle,
  IonToolbar,
  useIonRouter,
} from '@ionic/react';
import { Post } from '../components/Post';
import { blogPosts } from '../localData';
import { chevronBackOutline } from 'ionicons/icons';

const Home = () => {
  const router = useIonRouter();

  function handleBackClick() {
    router.goBack();
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Ionic Blog</IonTitle>

          <IonButtons slot="start">
            <IonButton onClick={() => handleBackClick()}>
              <IonIcon icon={chevronBackOutline} color="primary" />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Ionic Blog</IonTitle>
          </IonToolbar>
        </IonHeader>

        {blogPosts.map((post, index) => (
          <Post post={post} key={`post_${index}`} />
        ))}
      </IonContent>
    </IonPage>
  );
};

export default Home;