import * as React from "react";
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import Button from "@mui/material/Button";
import Box from "@mui/material/Stack";
import { alpha } from "@mui/material/styles";
import Link from "next/link";
import Typography from "@mui/material/Typography";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import AddIcon from "@mui/icons-material/Add";

export default function ActionAlerts() {
  return (
    <Box
      sx={{
        width: "100%",
      }}
    >
      <Alert
        onClose={() => {}}
        icon={false}
        sx={{
          backgroundColor: alpha("#0ca6f2", 0.03),
          border: `1px solid ${alpha("#0ca6f2", 0.2)}`,
          borderRadius: "6px",
        }}
      >
        <AlertTitle
          sx={{
            fontWeight: 600,
            fontSize: "20px",
          }}
        >
          👏 Get Started
        </AlertTitle>
        <Box
          sx={{
            display: "block",
            pb: theme => theme.spacing(2),
          }}
        >
          You can use this <CustomLink href={`/`}>sample data</CustomLink> to
          quickly get started testing the features and functionality of TiDB.
        </Box>
        <Button size="small" startIcon={<AddIcon fontSize="inherit" />}>
          Use your own dataset
        </Button>
      </Alert>
    </Box>
  );
}

const CustomLink = (props: { href: string; children: React.ReactNode }) => {
  const { href, children } = props;

  return (
    <Box
      component="span"
      sx={{
        // color: "#0ca6f2",
        display: "inline-flex",
        textDecoration: "underline",
      }}
    >
      <Link href={href}>
        {children}
        <OpenInNewIcon fontSize="inherit" />
      </Link>
    </Box>
  );
};