import React from "react";
import { Button } from "../../atoms/Button";
import { CommentIcon, LikeIcon, ShareIcon } from "../../../icons";

const buttonGroupsData = [
  { id: 1, title: "Like", icon: <LikeIcon /> },
  { id: 2, title: "Comment", icon: <CommentIcon /> },
  { id: 3, title: "Share", icon: <ShareIcon /> },
];
const PostButtonGroup = () => {
  return (
    <div className="flex items-center gap-4">
      {buttonGroupsData.map((button) => (
        <div key={button.id} className="flex-1 text-center">
          <Button
            size="lg"
            className="font-medium px-4.5"
            variant="gray-tertiary"
            leftIcon={button.icon}
          >
            {button.title}
          </Button>
        </div>
      ))}
    </div>
  );
};

export { PostButtonGroup };
