import {
  FontAwesomeIcon,
  FontAwesomeIconProps,
} from "@fortawesome/react-fontawesome"
import { ReactNode } from "react"

function OptionButton({
  icon,
  action,
  children,
}: {
  icon: FontAwesomeIconProps["icon"]
  action?: () => void
  children: ReactNode
}) {
  return (
    <button
      className="flex w-full flex-row items-center justify-between rounded-xl border-b-4 border-shield-gray bg-voidDark py-2 pr-4 pl-8 text-lg text-grayish duration-100 first:mt-4 last:mt-4 active:border-t-4 active:border-b-0 sm:py-4 sm:pr-8 sm:pl-16 sm:text-4xl sm:first:mt-8 sm:last:mt-8"
      onClick={() => action && setTimeout(action, 200)}
    >
      <span className="mx-auto">{children}</span>
      <FontAwesomeIcon
        className="ml-2 w-10 text-xl sm:ml-12 sm:text-4xl"
        icon={icon}
      />
    </button>
  )
}

export default OptionButton
