import { Box, Button, Avatar, CircularProgress, Typography } from "@mui/material";

interface ImageUploadFieldProps {
  label?: string;
  value: string;
  uploading?: boolean;
  onUpload: (file: File) => void;
  size?: number;
  baseUrl: string;
}

export default function ImageUploadField({
  label = "Upload Image",
  value,
  uploading = false,
  onUpload,
  size = 64,
  baseUrl,
}: ImageUploadFieldProps) {

  const imgSrc = value
    ? baseUrl.replace(/\/+$/, "") +
      "/" +
      value.replace(/^\/+/, "")
    : "";

  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 1, mb: 3 }}>
      <Typography variant="caption" color="text.secondary">{label}</Typography>
      <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
        <Avatar
          src={imgSrc}
          sx={{ width: size, height: size, borderRadius: 2 }}
        />

        <Button
          variant="outlined"
          component="label"
          disabled={uploading}
          startIcon={uploading && <CircularProgress size={16} />}
        >
          {uploading ? "Uploading..." : "Choose File"}
          <input
            type="file"
            accept="image/*"
            hidden
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) onUpload(file);
            }}
          />
        </Button>
      </Box>
    </Box>
  );
}