import { Button, Card, CardMedia, Typography } from "@mui/material";
import { Box } from "@mui/system";
import { Grid } from "../components/grid/Grid";
import { SPACING } from "../data/spacing";
// import WhatsAppIcon from "@mui/icons-material/WhatsApp";
import PhoneIcon from "@mui/icons-material/Phone";
import { motion } from "framer-motion";
import eita from "../assets/images/eita.png";

const Support = () => {
  // const MotionWhatsapp = motion(WhatsAppIcon);
  const MotionPhone = motion(PhoneIcon);

  return (
    <Box display={"flex"} justifyContent="center">
      <Grid
        container
        direction="column"
        justifyContent="center"
        my={SPACING.MEDIUM}
        xs={12}
        sm={12}
        md={10}
        lg={10}
      >
        <Card>
          <Grid p={SPACING.MEDIUM}>
            <Typography>
              برای تماس با پشتیبانی می توانید از طریق شماره زیر ارتباط برقرار
              کنید.
            </Typography>
            <Grid mt={5} justifyContent="center" container gap={SPACING.MEDIUM}>
              {/* <Grid>
                <a
                  style={{ textDecoration: "none" }}
                  href="https://wa.me/989011110919"
                  target="_blank"
                  rel="noreferrer"
                >
                  <Grid container direction="row" alignItems="center">
                    <MotionWhatsapp
                      color="success"
                      transition={{ duration: 1 }}
                      animate={{
                        x: 5,
                        y: 0,
                        scale: 1,
                        rotate: 360,
                      }}
                      whileHover={{ scale: 1.2 }}
                    />
                    <Typography color={"#29952d"} ml={2}>
                      09011110919
                    </Typography>
                  </Grid>
                </a>
              </Grid> */}

              <Grid>
                <a style={{ textDecoration: "none" }} href="tel:02128421237">
                  <Grid container direction="row" alignItems="center">
                    <MotionPhone
                      color="success"
                      transition={{ duration: 1 }}
                      animate={{
                        x: 5,
                        y: 0,
                        scale: 1,
                        rotate: 250,
                      }}
                      whileHover={{ scale: 1.2 }}
                    />
                    <Typography color={"#29952d"} ml={2}>
                      021-28421237
                    </Typography>
                  </Grid>
                </a>
              </Grid>

              <Grid>
                <a
                  style={{ textDecoration: "none" }}
                  href="https://eitaa.com/Drmirani"
                >
                  <Grid container direction="row" alignItems="center">
                    <motion.div
                      color="success"
                      transition={{ duration: 1 }}
                      animate={{
                        x: 5,
                        y: 0,
                        scale: 1,
                        rotate: 360,
                      }}
                      whileHover={{ scale: 1.2 }}
                    >
                      <Grid sx={{ width: 25 }}>
                        <CardMedia
                          component="img"
                          height="25"
                          image={eita}
                          alt="green iguana"
                        />
                      </Grid>
                    </motion.div>

                    <Typography color={"#29952d"} ml={2}>
                      پیشتیبانی سامانه رصدیار
                    </Typography>
                  </Grid>
                </a>
              </Grid>
            </Grid>
            <Grid mt={SPACING.MEDIUM}>
              <a href="https://anydesk.com/en/downloads/windows?dv=win_exe">
                <Button>دانلود نرم افزار ANYDESK</Button>
              </a>
            </Grid>
          </Grid>
        </Card>
      </Grid>
    </Box>
  );
};

export default Support;
