import type React from "react";
import { Box, Typography, Chip, IconButton } from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import type { Patch } from "api/types/Patch";

interface PackagePatchesListProps {
    patches: Patch[];
    editable: boolean;
    onDelete: (key: string) => void;
}

export default function PackagePatchesList({ patches, editable, onDelete }: PackagePatchesListProps): React.JSX.Element | null {
    if (patches.length === 0) {
        return null;
    }

    return (
        <Box sx={{ mt: 2 }}>
            <Typography variant="subtitle2" gutterBottom>Environment variables</Typography>
            {patches.map((patch) => (
                <Box key={patch.key} sx={{ display: "flex", alignItems: "center", gap: 1, mb: 0.5 }}>
                    <Chip label={patch.key} size="small" />
                    <Typography variant="body2">=</Typography>
                    <Typography variant="body2" sx={{ fontFamily: "monospace" }}>{JSON.stringify(patch.value)}</Typography>
                    {editable && (
                        <IconButton size="small" color="error" onClick={() => onDelete(patch.key)}>
                            <DeleteIcon fontSize="small" />
                        </IconButton>
                    )}
                </Box>
            ))}
        </Box>
    );
}