import React from "react"

import PropTypes from "prop-types"

import { styled } from "@mui/material/styles"
import Button from "@mui/material/Button"
import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded"

import theme from "./palette"

const myPalette = theme.palette

const CustomButton = styled(Button)(({ theme }) => ({
  color: `${myPalette.secondary.contrastText} !important`,
  backgroundColor: `${myPalette.secondary.main} !important`,
  paddingTop: "5px !important",
  paddingBottom: "5px !important",
  borderRadius: "5px !important",
  "&:hover": {
    backgroundColor: `${myPalette.secondary.light} !important`,
  },
}))

ContactButton.propTypes = {
  children: PropTypes.element.isRequired,
}

function ContactButton({ children }) {
  return (
    <CustomButton
      variant="contained"
      type="submit"
      fullWidth
      sx={{ mt: 1, mb: 2 }}
      endIcon={<ArrowForwardIosRoundedIcon />}
    >
      { children }
    </CustomButton>
  )
}

export default ContactButton
