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

const ButtonGrid = ({
  Buttons,
  style,
}: {
  Buttons: SocialButton[] | ProjectButton[];
  style?: CSSProperties;
}) => {

  if (Buttons[0].project) {
    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.project}
              username={button.platform}
              url={button.url}
            />
          );
        })}
      </div>
    )
  }

  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;