import React from "react";
import styles from "../styles/account.module.css";
import { Edit as EditIcon } from "@mui/icons-material";

interface AccountProfileTitleProps {
  firstName: string;
  lastName: string;
  registrationDate: string;
  isEditing: boolean;
  onEditClick: () => void;
  formatDate: (dateString: string) => string;
}

const AccountProfileTitle: React.FC<AccountProfileTitleProps> = ({
  firstName,
  lastName,
  registrationDate,
  isEditing,
  onEditClick,
  formatDate
}) => (
  <div className={styles.profileHeader}>
    <div className={styles.profileAvatar}>{firstName[0]}{lastName[0]}</div>
    <div className={styles.profileHeaderMain}>
      <h2 className={styles.profileTitle}>{firstName} {lastName}</h2>
      <div className={styles.profileSince}>Партнер с {formatDate(registrationDate)}</div>
    </div>
    <button
      onClick={onEditClick}
      className={styles.editButton}
    >
      <EditIcon fontSize="small" />
      {isEditing ? "Отмена" : "Редактировать"}
    </button>
  </div>
);

export default AccountProfileTitle;