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

import { ChatQuery } from "types/types";

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

interface BackstoryQueryInterface {
  query: ChatQuery,
  submitQuery?: ChatSubmitQueryInterface
}

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

  if (submitQuery === undefined) {
    return (<Box>{query.prompt}</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(query); }}>
      {query.prompt}
    </Button>
  );
}

export type {
  BackstoryQueryInterface,
  ChatSubmitQueryInterface,
};

export  {
  BackstoryQuery,
};