import type React from "react"
import { IonPage, IonContent, IonList, IonItem, IonLabel, IonIcon, IonToggle, IonButton } from "@ionic/react"
import {
  personCircleOutline,
  mailOutline,
  lockClosedOutline,
  notificationsOutline,
  moonOutline,
  logOutOutline,
} from "ionicons/icons"
import Header from "../components/Header"
import Footer from "../components/Footer"

const Account: React.FC = () => {
  return (
    <IonPage>
      <Header title="Account" />
      <IonContent fullscreen className="ion-padding bg-dark-app">
        <div className="px-4 py-4">
          <div className="flex flex-col items-center mb-8">
            <img
              src="/placeholder.svg?height=100&width=100"
              alt="Profile"
              className="w-24 h-24 rounded-full object-cover mb-4 border-2 border-tertiary-app"
            />
            <h2 className="text-2xl font-bold text-text-light-app">Himanshi Kashyap</h2>
            <p className="text-sm text-text-muted-app">himanshi.kashyap@example.com</p>
          </div>

          <IonList className="bg-card-bg-app rounded-lg-app border border-border-app mb-8">
            <IonItem lines="none" className="rounded-t-lg-app">
              <IonIcon icon={personCircleOutline} slot="start" color="tertiary" />
              <IonLabel className="text-text-light-app">Edit Profile</IonLabel>
            </IonItem>
            <IonItem lines="none">
              <IonIcon icon={mailOutline} slot="start" color="tertiary" />
              <IonLabel className="text-text-light-app">Change Email</IonLabel>
            </IonItem>
            <IonItem lines="none" className="rounded-b-lg-app">
              <IonIcon icon={lockClosedOutline} slot="start" color="tertiary" />
              <IonLabel className="text-text-light-app">Change Password</IonLabel>
            </IonItem>
          </IonList>

          <IonList className="bg-card-bg-app rounded-lg-app border border-border-app mb-8">
            <IonItem lines="none" className="rounded-t-lg-app">
              <IonIcon icon={notificationsOutline} slot="start" color="tertiary" />
              <IonLabel className="text-text-light-app">Notifications</IonLabel>
              <IonToggle slot="end" color="tertiary" checked={true} />
            </IonItem>
            <IonItem lines="none" className="rounded-b-lg-app">
              <IonIcon icon={moonOutline} slot="start" color="tertiary" />
              <IonLabel className="text-text-light-app">Dark Mode</IonLabel>
              <IonToggle slot="end" color="tertiary" checked={true} />
            </IonItem>
          </IonList>

          <IonButton expand="block" fill="outline" color="danger" className="rounded-md-app">
            <IonIcon icon={logOutOutline} slot="start" />
            Log Out
          </IonButton>
        </div>
      </IonContent>
      <Footer />
    </IonPage>
  )
}

export default Account