import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

import { CandidateQuestion } from "types/types";

type ChatSubmitQueryInterface = (query: CandidateQuestion) => void;

interface BackstoryQueryInterface {
  question: CandidateQuestion,
  submitQuery?: ChatSubmitQueryInterface
}

const BackstoryQuery = (props : BackstoryQueryInterface) => {
  const { question, submitQuery } = props;

  if (submitQuery === undefined) {
    return (<Box>{question.question}</Box>);
  }
  return (
    <Button variant="outlined" sx={{
      color: theme => theme.palette.custom.highlight, // Golden Ochre (#D4A017)
      borderColor: theme => theme.palette.custom.highlight,
      m: 1
    }}
      size="small" onClick={(e: any) => { submitQuery(question); }}>
      {question.question}
    </Button>
  );
}

export type {
  BackstoryQueryInterface,
  ChatSubmitQueryInterface,
};

export  {
  BackstoryQuery,
};