import { IonContent, IonHeader,IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonTitle, IonToolbar, IonButton, IonIcon } from '@ionic/react';
import { arrowDownCircle } from 'ionicons/icons';
import './styles/styles.css';

// This is the date that is going to appear on the
// card with the Motivational message
const current = new Date();
const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;


const Home: React.FC = () => {

  return (
    
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle class="ion-text-center screen-titles">TPC ❤️</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>

        {/* Card 1 */}
        <IonCard class="moti-card">
          <IonCardHeader class="card-header">
            <IonCardTitle class="card-date">
              {date}
              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton> 
            </IonCardTitle>
          </IonCardHeader>
          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
        </IonCard>

        {/* Card 2 */}
        <IonCard class="moti-card">
          <IonCardHeader class="card-header">
            <IonCardTitle class="card-date">
              {date}
              <IonButton fill="clear"> <IonIcon slot="icon-only" icon={arrowDownCircle} class="moti-download"></IonIcon></IonButton>
            </IonCardTitle>
          </IonCardHeader>
          <IonImg class="moti-img" alt="Motivational messa ge" src={require("./generatedMsgs/moti1.jpeg")}></IonImg>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};

export default Home;