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

interface QuestionsMiniButtonProps {
    icon: ReactNode;
    text: string;
}

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

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