"use client";
import { User } from "next-auth";
import React from "react";
import UserForm from "./user-form";
import SectionHeader from "@/components/section-header";
import Avatar from "@/components/avatar";
import { Button } from "@/components/ui/button";
import { Edit, XIcon } from "lucide-react";

function MePage({ user }: { user: User }) {
  const [editProfile, setEditProfile] = React.useState(false);
  return (
    <>
      <SectionHeader text="Dein Profil bearbeiten">
        <Button onClick={() => setEditProfile(!editProfile)}>
          {editProfile ? (
            <>
              <XIcon />
              <span>Abbrechen</span>
            </>
          ) : (
            <>
              <Edit />
              <span>Bearbeiten</span>
            </>
          )}
        </Button>
      </SectionHeader>
      <div className="flex items-center gap-4">
        <Avatar
          className="size-16 rounded-xl"
          src={user.image}
          fb={user.name}
        />

        <div>
          <h4 className="text-lg font-medium">{user.name}</h4>
          <h4 className="text-sm text-muted-foreground">{user.email}</h4>
        </div>
      </div>
      {editProfile && (
        <div className="w-full max-w-lg">
          <UserForm cb={() => setEditProfile(false)} server_user={user} />
        </div>
      )}
    </>
  );
}

export default MePage;
