import * as React from "react";
import NextLink from "next/link";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import ArrowForwardOutlinedIcon from "@mui/icons-material/ArrowForwardOutlined";
import ExpandMoreOutlinedIcon from "@mui/icons-material/ExpandMoreOutlined";

export function StartPlayButton(props: {
  children: React.ReactNode;
  href: string;
}) {
  const { children, href } = props;

  return (
    <Button
      endIcon={<ArrowForwardOutlinedIcon />}
      variant="contained"
      component={NextLink}
      href={href}
      sx={{
        my: (theme) => theme.spacing(2),
      }}
    >
      {children}
    </Button>
  );
}

export function ActionDisplayButton(props: {
  label: React.ReactNode;
  children?: React.ReactNode;
}) {
  const { children, label } = props;

  const [isShow, setIsShow] = React.useState(false);

  const handleShow = () => {
    setIsShow(!isShow);
  };

  return (
    <>
      <Box>
        <Button
          endIcon={<ExpandMoreOutlinedIcon />}
          variant="text"
          onClick={handleShow}
        >
          {label}
        </Button>
      </Box>
      <Box display={isShow ? "block" : "none"}>{children}</Box>
    </>
  );
}