import { PageHead } from "../../components/ui";
import { IconImage, IconUser } from "../../components/icons";

export default function AvatarGenerator() {
  return (
    <>
      <PageHead title="Avatar Generator" icon={<IconUser />} />

      <div className="panel" style={{ maxWidth: 880 }}>
        <div className="panel-head">
          <h3 className="grow">Standalone Emby utility</h3>
          <span className="badge badge-ok">Python script</span>
        </div>
        <div className="panel-body col" style={{ gap: 14 }}>
          <p className="hint" style={{ margin: 0 }}>
            This tool lives in <code>emby-avatar-generator.py</code> and generates rounded user avatar tiles for Emby users.
          </p>
          <div className="mini-grid">
            <div className="mini-stat">
              <div className="stat-icon">
                <IconUser />
              </div>
              <div className="stat-meta">
                <div className="stat-value" style={{ fontSize: 16 }}>User avatars</div>
                <div className="stat-label">Creates initials-based PNG profile images</div>
              </div>
            </div>
            <div className="mini-stat">
              <div className="stat-icon">
                <IconImage />
              </div>
              <div className="stat-meta">
                <div className="stat-value" style={{ fontSize: 16 }}>Modern gradients</div>
                <div className="stat-label">Mesh backgrounds, shapes, and rounded corners</div>
              </div>
            </div>
          </div>
          <div className="field">
            <label className="field-label">Script path</label>
            <div className="input mono">emby-avatar-generator.py</div>
          </div>
          <p className="hint" style={{ margin: 0 }}>
            This page adds the avatar generator to the Emby tool list. The script itself is still run directly from the workspace.
          </p>
        </div>
      </div>
    </>
  );
}
