Modified Integrations component to include props.

Client/src/Components/Integrations/index.jsx

@@ -1,11 +1,17 @@
 import { Box, Typography, useTheme } from '@mui/material';
 import Button from '../Button';
+import PropTypes from 'prop-types';
 
 /**
  * Integrations component
- * @returns {JSX.Element}
+ * @param {Object} props - Props for the IntegrationsComponent.
+ * @param {string} props.url - The URL for the integration image.
+ * @param {string} props.header - The header for the integration.
+ * @param {string} props.info - Information about the integration.
+ * @param {Function} props.onClick - The onClick handler for the integration button.
+ * @returns {JSX.Element} The JSX representation of the IntegrationsComponent.
  */
-const IntegrationsComponent = () => {
+const IntegrationsComponent = ({ url, header, info, onClick }) => {
   const theme = useTheme();
 
   return (
@@ -19,8 +25,8 @@ const IntegrationsComponent = () => {
     >
       <Box
         component="img"
-        src="https://via.placeholder.com/100"
-        alt="Placeholder"
+        src={url}
+        alt="Integration"
         width={100}
         height={100}
       />
@@ -32,8 +38,8 @@ const IntegrationsComponent = () => {
         flexDirection="column"
         alignItems="flex-start"
       >
-        <Typography variant="h6" component="div">
-          Header
+        <Typography variant="h6" component="div" style={{ fontSize: '16px' }}>
+          {header}
         </Typography>
         <Typography
           variant="body1"
@@ -43,14 +49,23 @@ const IntegrationsComponent = () => {
             wordWrap: 'break-word',
             textAlign: 'left'
           }}
+          style={{ fontSize: '13px' }}
         >
-          This is a paragraph that provides more detail about the header.
+          {info}
         </Typography>
       </Box>
       
-      <Button label="Click Me" level="primary" />
+      <Button label="Click Me" level="primary" onClick={onClick} />
     </Box>
   );
 };
 
+// PropTypes for IntegrationsComponent
+IntegrationsComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+  header: PropTypes.string.isRequired,
+  info: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
 export default IntegrationsComponent;