import React, { useEffect } from 'react';
import { Card, CardContent, Typography, Container, Grid } from '@mui/material';
import { Helmet, HelmetProvider } from 'react-helmet-async';

const FiverrGigCard = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.id = 'fiverr-seller-widget-script-c2b365ca-b271-4447-ae14-ca2f2a8ad3ec';
    script.src = 'https://widgets.fiverr.com/api/v1/seller/bermudezw1008?widget_id=c2b365ca-b271-4447-ae14-ca2f2a8ad3ec';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      if (document.getElementById('fiverr-seller-widget-script-c2b365ca-b271-4447-ae14-ca2f2a8ad3ec')) {
        document.body.removeChild(script);
      }
    };
  }, []);

  return (
    <HelmetProvider>
      <Container>
        <Helmet>
          <title>Promote Your Fiverr Gig</title>
          <meta name="description" content="Check out my Fiverr gig for top-notch services!" />
          <meta name="keywords" content="Fiverr, freelance, gig, services" />
          <meta property="og:title" content="Promote Your Fiverr Gig" />
          <meta property="og:description" content="Check out my Fiverr gig for top-notch services!" />
          <meta property="og:image" content="https://your-image-url.com/your-image.jpg" />
        </Helmet>
        <Grid container spacing={4} justifyContent="center">
          <Grid item xs={12} md={6}>
            <Card>
              <CardContent>
                <Typography variant="h5" component="div" gutterBottom>
                  My Fiverr Gig
                </Typography>
                <Typography variant="body2" color="text.secondary" gutterBottom>
                  I offer exceptional services to meet your needs. Whether it's web development, graphic design, or digital marketing, I am here to provide top-notch solutions.
                </Typography>
                <div
                  itemScope
                  itemType="http://schema.org/Person"
                  className="fiverr-seller-widget"
                  style={{ display: 'inline-block' }}
                >
                  <a
                    itemProp="url"
                    href="https://www.fiverr.com/bermudezw1008"
                    rel="nofollow"
                    target="_blank"
                    style={{ display: 'inline-block' }}
                  >
                    <div
                      className="fiverr-seller-content"
                      id="fiverr-seller-widget-content-c2b365ca-b271-4447-ae14-ca2f2a8ad3ec"
                      itemProp="contentURL"
                      style={{ display: 'none' }}
                    ></div>
                    <div id="fiverr-widget-seller-data" style={{ display: 'none' }}>
                      <div itemProp="name">bermudezw1008</div>
                      <div itemScope itemType="http://schema.org/Organization">
                        <span itemProp="name">Fiverr</span>
                      </div>
                      <div itemProp="jobtitle">Seller</div>
                      <div itemProp="description">
                        Hello, my name is Will. I'm a versatile programmer fluent in multiple languages and technologies, including JavaScript, Python, and C++. I specialize in custom API development, seamless integration, and creating dynamic websites. Whether it's coding, automation, or digital assets, I bring precision and innovation to every project. Let's collaborate!
                      </div>
                    </div>
                  </a>
                </div>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Container>
    </HelmetProvider>
  );
};

export default FiverrGigCard;