khata-ui/react-auth/ProfileCreate.tsx

import * as React from "react";
import {
  Box,
  TextField,
  Button,
  Typography,
  CircularProgress,
} from "@mui/material";

export interface ProfileCreateProps {
  defaultUsername?: string;
  defaultEmail?: string;
  onSubmit: (data: { name: string; email: string }) => Promise<void>;
  onBack?: () => void;
  loading?: boolean;
  error?: string | null;
}

export function ProfileCreate({
  defaultUsername,
  defaultEmail,
  onSubmit,
  onBack,
  loading = false,
  error = null,
}: ProfileCreateProps) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState(defaultEmail ?? "");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSubmit({ name: name || defaultUsername || "", email });
  };

  return (
    <Box
      sx={{
        maxWidth: 480,
        mx: "auto",
        mt: 4,
        p: 4,
        borderRadius: 3,
        boxShadow: 3,
        bgcolor: "background.paper",
      }}
    >
      <Typography variant="h5" fontWeight="bold" gutterBottom>
        Complete Your Profile
      </Typography>

      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
        {defaultUsername && (
          <span>
            Welcome <strong>{defaultUsername}</strong>!{" "}
          </span>
        )}
        Fill in your details to get started.
      </Typography>

      <form onSubmit={handleSubmit}>
        {defaultUsername && (
          <TextField
            fullWidth
            label="Username"
            value={defaultUsername}
            margin="normal"
            disabled
          />
        )}

        <TextField
          fullWidth
          label="Full Name"
          margin="normal"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder={defaultUsername ?? "Your name"}
          required
          autoFocus={!defaultUsername}
        />

        <TextField
          fullWidth
          label="Email"
          type="email"
          margin="normal"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder={defaultEmail ?? "you@example.com"}
          required
        />

        {error && (
          <Typography color="error" variant="body2" sx={{ mt: 1 }}>
            {error}
          </Typography>
        )}

        <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
          {onBack && (
            <Button
              fullWidth
              variant="outlined"
              onClick={onBack}
              disabled={loading}
            >
              Back
            </Button>
          )}
          <Button
            fullWidth
            type="submit"
            variant="contained"
            disabled={loading}
          >
            {loading ? <CircularProgress size={24} /> : "Create Profile"}
          </Button>
        </Box>
      </form>
    </Box>
  );
}