import React, { useState } from 'react';
// import { useTranslation } from 'react-i18next';
// import StarRatings from 'react-star-ratings';

import {
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
  IonPage,
  IonButtons,
  IonBadge,
  IonMenuButton,
  IonButton,
  IonIcon,
  IonDatetime,
  IonSelectOption,
  IonList,
  IonItem,
  IonLabel,
  IonSelect,
  IonPopover,
  IonText,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardSubtitle,
  IonCardContent,
  IonTabs,
  IonTabBar,
  IonTabButton,
  IonSegment,
  IonSegmentButton,
  useIonRouter,
} from '@ionic/react';
import './style.scss';
import {
  locationSharp,
  settingsOutline,
  qrCode,
  shareSocialOutline,
  ellipsisHorizontal,
  ellipsisVertical,
  logoFacebook,
  phonePortraitSharp,
  pricetagSharp,
  archiveSharp,
  calendar,
  personCircle,
  map,
  informationCircle,
  mailSharp,
  chevronDownSharp,
  chevronForwardSharp,
} from 'ionicons/icons';
// import AboutPopover from '../../components/AboutPopover';
import { format, parseISO } from 'date-fns';

import lookForVisitorSvg from './look_for_visitor.svg';

type SessionListProps = {
  hide: boolean;
};

const AboutContent: React.FC<SessionListProps> = ({ hide }) => {
  let route = useIonRouter();

  if (hide) return <></>;
  return (
    <>
      <div
        style={{
          //
          paddingTop: '1rem',
          paddingLeft: '1rem',
          paddingRight: '1rem',
          display: 'flex',
          flexDirection: 'column',
          gap: '1rem',
        }}
      >
        <div>
          <IonText color="tertiary" style={{ fontSize: '0.8rem' }}>
            <IonText style={{ fontWeight: 'bold' }} color="success">
              25
            </IonText>
            <IonText>Followers</IonText>
            {'   '}
            <IonText style={{ fontWeight: 'bold' }} color="success">
              0
            </IonText>
            <IonText>Followers</IonText>
          </IonText>
        </div>

        <div
          style={{
            paddingBottom: '3rem',
          }}
        >
          <IonText style={{ fontSize: '0.9rem' }}>
            <p>接受 payme / 支付寳 / FPS：</p>
            <p>Accepting HSBC payme / alipay / FPS </p>
            <p>更多資料 / for more detail:</p>
            <p>https://louiscklaw.github.io/carousell </p>
            <p>歡迎PM查詢</p>
          </IonText>
        </div>
      </div>

      {/* private information */}
      <IonList>
        <IonItem lines="none">
          <h3>Private information</h3>
        </IonItem>
        <IonItem
          lines="full"
          button
          onClick={(e) => {
            route.push('/tabs/carousell_me/OffersMade');
          }}
        >
          <IonText style={{ fontSize: '0.9rem' }}>My Offers</IonText>
        </IonItem>
      </IonList>
    </>
  );
};

export default AboutContent;