如何使用适当的函数参数将这个硬编码的小部件转换为可重用和模块化的小部件？

// 硬编码的小部件
function hardcodedWidget() {
  // 硬编码的内容
  console.log("This is a hardcoded widget.");
}

// 使用函数参数的可重用和模块化的小部件
function reusableWidget(content) {
  console.log(content);
}

// 使用函数参数定义样式的小部件
function styledWidget(content, color, size, font) {
  console.log(`%c${content}`, `color: ${color}; font-size: ${size}; font-family: ${font}`);
}

// 使用回调函数的小部件
function interactiveWidget(content, onClick) {
  console.log(content);
  onClick();
}

// 使用多个参数抽象小部件的不同部分
function customizableWidget(header, content, footer) {
  console.log(header);
  console.log(content);
  console.log(footer);
}

// 示例用法
reusableWidget("This is a reusable widget.");
styledWidget("Styled widget", "red", "16px", "Arial");
interactiveWidget("Interactive widget", () => {
  console.log("Widget clicked!");
});
customizableWidget("Header", "Content", "Footer");