frontPanel/src/ui_kit/QuestionsMiniButton.tsx

import { Button, Typography, useTheme } from "@mui/material";
import Answer from "../assets/icons/questionsPage/answer";
import React from "react";
import { ReactNode } from "react";

interface QuestionsMiniButtonProps {
  icon: ReactNode;
  text: string;
  onClick: () => void;
  dataCy?: string;
}

export default function QuestionsMiniButton({ icon, text, onClick, dataCy }: QuestionsMiniButtonProps) {
  const theme = useTheme();

  return (
    <>
      <Button
        variant="outlined"
        data-cy={dataCy}
        sx={{
          padding: "26px 15px 15px 15px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          width: "174px",
          height: "140px",
          border: "1px solid #9A9AAF",
          borderRadius: "8px",
          background: "transparent"
        }}
        onClick={onClick}
      >
        {icon}
        <Typography
          sx={{
            textAlign: "left",
            width: "100%",
            fontWeight: 400,
            fontSize: "16px",
            lineHeight: "18.4px",
            color: theme.palette.grey2.main,
          }}
        >
          {text}
        </Typography>
      </Button>
    </>
  );
}