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

export interface ProfileViewProps {
  name: string;
  username: string;
  email: string;
  onEdit?: () => void;
  loading?: boolean;
}

export function ProfileView({
  name,
  username,
  email,
  onEdit,
  loading = false,
}: ProfileViewProps) {
  const initials = (name || username)
    .split(" ")
    .map((s) => s[0])
    .join("")
    .toUpperCase()
    .slice(0, 2);

  return (
    <Paper
      sx={{
        maxWidth: 480,
        mx: "auto",
        mt: 4,
        p: 4,
        borderRadius: 3,
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: 3, mb: 3 }}>
        <Avatar
          sx={{
            width: 64,
            height: 64,
            bgcolor: "primary.main",
            fontSize: 24,
          }}
        >
          {initials}
        </Avatar>

        <Box>
          <Typography variant="h5" fontWeight="bold">
            {name || username}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            @{username}
          </Typography>
        </Box>
      </Box>

      <Box sx={{ mb: 2 }}>
        <Typography variant="overline" color="text.secondary" display="block">
          Email
        </Typography>
        <Typography variant="body1">{email}</Typography>
      </Box>

      {onEdit && (
        <Button
          fullWidth
          variant="outlined"
          onClick={onEdit}
          disabled={loading}
          sx={{ mt: 1 }}
        >
          {loading ? <CircularProgress size={20} /> : "Edit Profile"}
        </Button>
      )}
    </Paper>
  );
}