import Button from "./Button";
import styles from "styles/Button.module.sass";
import { SocialButton } from "utils/types";
import { CSSProperties } from "react";

const ButtonGrid = ({
  Buttons,
  style,
}: {
  Buttons: SocialButton[];
  style?: CSSProperties;
}) => {
  return (
    <div className={styles.grid} style={style}>
      {Buttons.map((button, index) => {
        return (
          <Button
            id={button.id}
            key={`${button.platform}-${index}`}
            icon={button.icon}
            platform={button.platform}
            username={button.username}
            url={button.url}
          />
        );
      })}
    </div>
  );
};

export default ButtonGrid;