import React from "react";
import * as S from "./PresetQuestions.style";

const PresetQuestions = ({ theme, questions }) => {
  return (
    <S.Container theme={theme}>
      {questions.map((item, index) =>
        item.style === "highlight" ? (
          <S.GradationBorderDiv
            theme={theme}
            key={index}
            onClick={item.handler}
          >
            <S.Span>
              <S.GradationSpan theme={theme}>{item.title}</S.GradationSpan>
            </S.Span>
          </S.GradationBorderDiv>
        ) : (
          <S.BorderDiv theme={theme} key={index} onClick={item.handler}>
            <S.Span theme={theme}>{item.title}</S.Span>
          </S.BorderDiv>
        ),
      )}
    </S.Container>
  );
};

export default PresetQuestions;