import { useSyncState } from "../store/index.tsx";
import { SyncIcon } from "../Sync/SyncIcon.tsx";
import { accountIcon } from "./style.css.ts";

/**
 * Displays the user's icon, along with the sync status of the app.
 *
 * See {@link SyncIcon} to learn how to configure that component.
 */
export function AccountIcon(props: { imgSrc: string }) {
  const { imgSrc } = props;
  const syncState = useSyncState();

  return (
    <div className={accountIcon.container}>
      <SyncIcon status={syncState} className={accountIcon.syncIcon} />
      <img src={imgSrc} alt="" className={accountIcon.image} />
    </div>
  );
}